How to create a Custom Scrollbar in WordPress

You must have noticed some websites don’t have the standard boring browser default scrollbar. Instead they have a nicely designed, color matching scroll bar that enhances the overall look of the website. Here you’ll learn how to create a Custom Scrollbar in WordPress and make your web site stand out from the mass.

Ways of customizing scrollbars in WordPress

There are three main ways to customize scrollbars in WordPress:

• customizing scrollbars with CSS
• installing a Custom Scrollbar WordPress plugin
• adding a Javascipt or jQuerry script to your site

Customizing the scrollbar with CSS is pretty simple, but works only in Webkit browsers (Chrome, Safari and Opera). Adding Javascipt or jQuerry scripts usually requires some knowledge of those languages for customizing the look of the scrollbar. Therefore, the simpliest solution for customizing browser scrollbars is by installing a Custom Scrollbar WordPress plugin.

The simpliest and quickest way of customizing your web site scrollbar is by installing a dedicated WordPress plugin.

Custom Scrollbar Plugins for WordPress

Opposite from the expected, there is not a wide variety of plugins for customizing scrollbars in the WordPress repository. Also, those plugins are not very popular with thousands of active installations, votes and reviews. This only means many developers and site owners are still unaware of this great opportunity to enhance the look of their web sites.
We tested and reviewed two most up to date custom scrollbar plugins at the time of writing this article (October, 2019): Advanced scrollbar and Ultimate Custom ScrollBar.

Advanced Scrollbar WordPress Plugin

Advanced scrollbar by 1infosoft is one of few up to date WordPress plugins to customize the look of your browser’s scroll bar. This plugin is completely free and downloadable from the WordPress repository.

The plugin has a couple of basic settings and it takes less than a minute to customize them. From the visual aspect you can customize the scrollbar size and colors. Furthermore, there are functional settings like scrolling speed, scroll bar location and a nicely working auto-hide option.

Advanced scrollbar WordPress Plugin is cross-browser compatible, and very light. It adds only one server request to your web site, which means it won’t affect your site’s loading speed noticeably.

The only downside we noticed is that it doesn’t affect mobile phone scroll bars (tested on Chrome for Android), even though it has been declared in the documentation it should work.

Download the Plugin

Ultimate Custom ScrollBar WordPress Plugin

Created by ThemesPick, Ultimate Custom ScrollBar is another pretty good up to date plugin for customizing scroll bars in WordPress. The plugin is free for download from the WordPress plugins repository.

With a couple more settings than the previously reviewed Advanced scrollbar plugin, with Ultimate Custom ScrollBar you’ll be able to customize the scroll bar look and feel even more. It will take few minutes more to set up and test the additional settings, but the setup is still pretty quick. Ultimate Custom ScrollBar works nicely, it’s cross-browser compatible and also affects the scrollbar on mobile devices.

The downsides we noticed are (sometimes) a bit weird behavior of the auto-hide option, and generation of two server requests, which affects the web site loading speed slightly more than the previously tested Advanced Scrollbar plugin.

Download the Plugin

Custom Scrollbar in WordPress – Conclusion

Both Custom Scrollbar WordPress plugins we tested are good options for customizing website scroll bars, both with their own pros and cons. We loved the simplicity and lightweight of the Advanced Scrollbar plugin, but we missed the lack of support for mobile browsers. Ultimate Custom ScrollBar does the job on mobile phones perfectly, but at the cost of one more server request (slightly slower site loading speed). We’re sure that the developers will fix those few small issues on both plugins in the upcoming versions.

Since both plugins are simple and quick to install and setup, we suggest to try them both and decide which one works better for you.

Customizing Scrollbars with CSS

As we previously mentioned, browser scrollbars can be visually customized with a couple of CSS rules. Unfortunately this method works only in Webkit based browsers such as Chrome, Safari or Opera. If you want to learn how to customize scroll bars with CSS check our following tutorial:

How to Customize Scrollbars with CSS