Scrollbar customization options

Custom Scrollbars provides many options that allow you customize the appearance of your scrollbar the way you like it. While editing the scrollbar settings, you will see a preview on the page in the Live Preview textbox section in real-time.

Scrollbar width

You can set the size of your scrollbar using this option. This applies to both the vertical and horizontal scrollbars. Due to limitations on some browsers, the size options may differ.

Platform default

This option is only available on Firefox

The Platform default width is the width that Firefox automatically uses for your operating system. Depending on your operating system, this can sometimes be adjusted in your operating system's settings. For more information on this option, see What is the platform default width.

Wide

This option is only available on Google Chrome and Microsoft Edge

The Wide width will make the scrollbar larger than the Thin width.

Thin

The Thin width will make the scrollbar thinner. On Firefox, the scrollbar buttons will be removed.

Hidden

The Hidden width will make the scrollbar invisible.

Other

This option is only available on Google Chrome and Microsoft Edge

The Other option allows you to manually specify the size of the scrollbar using a variety of measurement units. For more information, see Custom scrollbar width.

Automatically hide scrollbar

This option allows you to automatically hide the scrollbar for components that you are not interacting with. This option will hide the scrollbar unless you are hovering over the component. For example, if you are hoving your mouse over a text box, the scrollbar will be visible. For more information on this feature, see Hiding scrollbar when not in use.

Scrollbar buttons

This option is only available on Google Chrome and Microsoft Edge

This option allows you to enable or disable the arrow buttons that appear at the top and bottom (or left and right) of the scrollbar. The buttons match the color of the scrollbar thumb and you can specify whether you want the arrow to be light or dark. By default, the scrollbar buttons are not visible.

Scrollbar roundness

This option is only available on Google Chrome and Microsoft Edge

This option controls the corner rounding of the scrollbar thumb. The option is represented by a percentage, with 0% indicating no corner rounding and 100% indicating completely rounded corners.

Custom colors

The color of the scrollbar can be customized using the color wheel selection tool or by providing colors in hexidemical, RGB or HSV format. To set custom colors, you need to first set the Use custom colors option to Yes to display the color selection areas.

You can adjust the color of two scrollbar areas:

• Thumb: The part of the scrollbar that moves when you scroll. On Google Chrome and Microsoft Edge, this is also the color of the scrollbar buttons, if they are visible.
• Track: The background of the scrollbar.

If you do not want to use custom colors, a default light scrollbar color scheme will be applied to your scrollbars. If you are using Firefox, your scrollbar colors will be dynamically adjusted based on the website you are viewing and your operating system's color preference settings.

Allow websites to override

In some cases, websites may provide their own scrollbar customizations to control the appearance of the scrollbar, which will override the Custom Scrollbar settings. You can control what parts of the scrollbar websites can control (if any). By default, this option is set to None so that Custom Scrollbars has full control over the appearance of the scrollbar on all websites. However, you may wish to let websites set the color, width or both.