Plugin Overview Where to Apply Customizable Style Position and Behavior User Experience Cross-Browser Support Mobile Friendly Well Documented More Features
Installation For most cases and most users, the procedure will be:See a short video: How To Install WordPress Plugins
Settings General Design
CSS Customisations Host Element Scrollbars
Assignments
Changelog 1.0.0 (2 November 2023)

# Custom Scrollbar for WordPress - Plugin Overview

## Custom Scrollbar: Elevate Your Scrolling Experience

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.

## Choose Where to Apply Custom Scrollbars

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.

## Customizable Style, Colors, and Gradients

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.

## Position and Behavior Control

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.

## Elevate Your Website's User Experience

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.

## Completely Cross-Browser Support

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.

## Mobile Friendly

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.

## Well Documented

This plugin comes with the full documentation, so using the plugin becomes even easier.

## More Amazing Features

- Effortless Implementation: Easy to install and use
- Compatibility Across Templates and Frameworks
- Seamless Mobile and Touch Device Support
- Browser Compatibility: Works on all modern browsers
- Lightweight and Lightning-Fast: Only 55KB when minified
- Native JavaScript: No reliance on jQuery
- RTL (Right-to-Left) Compatibility
- SEO-Friendly: Does not impact site indexing in search engines
- Cross-Platform Compatibility: Works on Windows, Linux, and macOS
- Comprehensive User Manual for Easy Configuration

# How to Install Custom Scrollbar for WordPress

Install Custom Scrollbar plugin as any other WordPress plugin . Just install and go.

## For most cases and most users, the procedure will be:

- Download and unzip item to your local machine.
- From the backend of your WordPress site (Admin Dashboard) select Plugins → Add New.
- Click the "Upload Plugin" button and select t42-custom-scrollbar-v.x.x.x.zip package on your local machine.
- Click the "Install Now" button.
- Don’t forget to activate the plugin after installation.

## See a short video: How To Install WordPress Plugins

# Settings — Custom Scrollbar for WordPress

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.

## Choose for which elements to apply scrollbars

Custom Scrollbar for WordPress - General Settings

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.

## Customizable Style, Colors & Gradients, Position and more

Custom Scrollbar for WordPress - Design Settings

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.

# Custom Scrollbar CSS Customisations

The Custom Scrollbar styling is very simple if you understand the CSS selectors and their meanings.

Custom Scrollbar - Custom CSS Settings

## Host Element

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".

## Scrollbars

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.

# How to limit where the plugin should work

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.

Custom Scrollbar — Assignments Settings

# Changelog

## 1.0.0 (2 November 2023)

- added
  Initial release