Custom Scrollbar is your go-to solution for enhancing the scrolling experience on your WordPress website. This versatile plugin empowers you to take control of scrollbars, ensuring they align seamlessly with your site's aesthetics and functionality. With an array of customizable options, you can transform the way users navigate your content.
Window Scrollbars: Apply custom scrollbars to your entire website, seamlessly replacing the native scrollbars.
Textarea Scrollbars: Tailor the scrolling experience for textarea elements, providing a consistent, user-friendly interface.
Excluded Textarea: Define specific textarea elements to skip the customization process, giving you ultimate control over scrollbars.
Custom Elements: Extend the scroll customization to custom elements on your site, ensuring a cohesive design.
Elements Selector: Specify selectors for the elements that will receive custom scrollbars, allowing you to fine-tune your design.
Preview: Instantly visualize how your scrollbar will look as you make changes to its settings.
Style: Choose from a selection of built-in styles or create your own unique design.
Handle Color: Customize the scrollbar handle's color or gradient to match your website's theme.
Track Color: Personalize the scrollbar track's color or gradient, ensuring a perfect fit with your design.
Resize: Define how the host element should behave when resizing, optimizing the user's viewing experience.
Absolute Padding: Maintain a consistent spacing to the edge of the content, even as the scroll-offset changes.
Visibility: Control the basic visibility of the scrollbars to meet your design preferences.
Auto Hide: Enable automatic hiding of visible scrollbars after specific user actions, providing a cleaner look.
Auto Hide Delay: Set the delay in milliseconds before scrollbars automatically disappear, fine-tuning user interaction.
Drag Scrolling: Decide if the scrollbar handle should support drag scrolling, enhancing navigation.
Click Scrolling: Define whether the scrollbar track should support click scrolling, making content navigation easier than ever.
Custom Scrollbar for WordPress grants you the power to perfect the scrolling experience on your website. With an array of customization options, your site's design and functionality will seamlessly come together, delivering a smooth and visually appealing user experience. Elevate your website today with Custom Scrollbar – where scrolling becomes an art.
All major browsers are supported: Chrome, Firefox, Safari, Edge, Opera, etc.
Does not matter which browser users view your site.
Custom Scrollbar for WordPress works perfectly in all browsers.
Custom Scrollbar for WordPress works great with all type of devices: smartphones, tablets and desktop computers. So your content will be protected on every device.
This plugin comes with the full documentation, so using the plugin becomes even easier.
Install Custom Scrollbar plugin as any other WordPress plugin . Just install and go.
By default, the plugin will apply custom scrollbars to your entire website, seamlessly replacing the native scrollbars. However, you can also choose to apply custom scrollbars to specific elements on your site, such as textarea elements. You can also define specific elements to skip the customization process, giving you ultimate control over scrollbars.
The following is a screenshots of plugin settings and explaining each option.
Window Scrollbars: Enable awesome scrollbars for whole page.
Textarea Scrollbars: Enable awesome scrollbars for textarea elements.
Excluded Textarea: Textarea elements by selector will be skipped. You can specify multiple selectors separated by commas.
Custom Elements: Enable awesome scrollbars for custom elements.
Elements Selector: To elements by selector will be added awesome scrollbars. You can specify multiple selectors separated by commas.
Preview: Change settings to see how the scrollbar will look.
Style: Select one of built-in style. You can customize it below.
Handle Color: Select color or gradient for scrollbar handle.
Track Color: Select color or gradient for scrollbar track.
Resize: The resize behavior of the host element.
Absolute Padding: Absolute padding means that the content will always have the defined spacing to the edge, regardless of the scroll-offset.
Visibility: The basic visibility of the scrollbars.
Auto Hide: The possibility to hide visible scrollbars automatically after a certain action.
Auto Hide Delay: The delay in milliseconds before the scrollbars get hidden automatically.
Drag Scrolling: Defines whether the scrollbar-handle supports drag scrolling.
Click Scrolling: Defines whether the scrollbar-track supports click scrolling.
The Custom Scrollbar styling is very simple if you understand the CSS selectors and their meanings.
The plugin is adding several class names to the host-element. Some of them are always present and some are only present if a certain behavior is fulfilled. This class names helps us to understand the current state of the plugin & scrollbars.
All class names for the host-element have the prefix ".os-host".
| CSS Selector | Description |
| .os-host | Indicates whether this element is a host-element. Only applied if the host-element is NOT for a textarea (the target-element is NOT a textarea element). |
| .os-host-textarea | Indicates whether this element is a host-element for a textarea. Only applied if the host-element is for a textarea (the target-element is a textarea element). |
| .os-host-transition | Indicates that the plugin is fully initialized and transitions are possible now. |
| .os-host-rtl | Indicates whether the detected horizontal scroll direction is RTL (Right To Left). |
| .os-host-resize-disabled | Indicates that the resize option is set to "none". |
| .os-host-scrolling | Indicates that a scroll is performing right now. |
| .os-host-overflow | Indicates whether a overflow on any axis is present. |
| .os-host-overflow-x | Indicates whether a overflow on the x-axis is present. |
| .os-host-overflow-y | Indicates whether a overflow on the y-axis is present. |
| .os-host-scrollbar-horizontal-hidden |
Indicates whether the horizontal scrollbar is hidden due to the "visibility" option. (If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the x-axis is present.) |
| .os-host-scrollbar-vertical-hidden |
Indicates whether the vertical scrollbar is hidden due to the "visibility" option. (If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the y-axis is present.) |
| * | The class name(s) which is set by the option "className". |
Now that we are aware of the class names of the host-element, we can continue with the structure of the scrollbars. Both scrollbars have the same DOM structure. Each of the scrollbar elements can have additional classes. These classes get added if a certain behavior is fulfilled. Here is a complete listing of all class names of the .os-scrollbar element:
| CSS Selector | Description |
| .os-scrollbar | Indicates that this element is a scrollbar. (The root element of all scrollbar elements) |
| .os-scrollbar-horizontal | Indicates that this element is a horizontal scrollbar. |
| .os-scrollbar-vertical | Indicates that this element is a vertical scrollbar. |
| .os-scrollbar-auto-hidden | Indicates that this scrollbar is hidden because of the "autoHide" option. Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect. |
| .os-scrollbar-auto-hidden | Indicates that this scrollbar is hidden because of the "autoHide" option. Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect. |
| .os-scrollbar-unusable | Indicates that this scrollbar is not usable due to no overflow or deactivation via the "overflowBehavior" option. |
Here is a complete listing of all class names of the os-scrollbar-track element:
| CSS Selector | Description |
| .os-scrollbar-track | Indicates that this element is a scrollbar track. |
| .os-scrollbar-track-off | Indicates that click scrolling is not possible. Only applied if the "scrollbars.clickScrolling" option is false. |
Here is a complete listing of all class names of the .os-scrollbar-handle element:
| CSS Selector | Description |
| .os-scrollbar-handle | Indicates that this element is a scrollbar handle. |
| .os-scrollbar-handle-off | Indicates that drag scrolling is not possible. Only applied if the "scrollbars.dragScrolling" option is false. |
If you have any problems with styling, or you can't achieve your desired style, please contact with our support team.
Assignments Settings: By selecting the specific assignments you can limit where the plugin should or shouldn't be work. To have it working on all pages, simply do not specify any assignments.
