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.
See something that's wrong or unclear?
Submit an issue and we will fix it.
© 2016 - 2024 42Theme. All Rights Reserved.