How to Add a Custom Scrollbar to WordPress with jQuery

The scrollbar is arguably the most neglected browser element when it comes to design. Pretty much all browsers and operating systems display it differently. Some detail-oriented clients and designers may have noticed the inconsistent look and feel of the scrollbar across these different touch points.

If you are one of these people, today is your lucky day – I’m going to show you how to create a custom scrollbar in a few easy steps, then we’ll overwrite the default browser scrollbar and achieve a consistent look and feel across all browsers and operating systems!

As you may already know, CSS does not offer a universal way to directly target the scrollbar, so the only viable option is JavaScript –jQuery, to be precise. Some Webkit-based browsers (Chrome, Safari, the default Android browser, etc.), offer proprietary CSS vendor-prefixed ways to achieve this, but what we want is a silver bullet – a solution that will work across all browsers and operating systems.

In this tutorial, we are going to use a jQuery plugin called the Malihu Custom Scrollbar. The number of JavaScript plugin options out there that can achieve a custom scrollbar is quite staggering, but I settled on this particular one for the following seven reasons:

• It supports the body element. Most plugins do not offer a way to target the browser window, but this one does.
• It works on both vertical and horizontal scrollbars.
• It has mouse-wheel, keyboard, and touch support.
• It is highly customizable via CSS.
• It has right-to-left (RTL) direction support.
• It has comprehensive documentation.
• It has cross browser compatibility.

One thing to note is that for this plugin (or any other jQuery plugins to work), your WordPress theme must already have the jQuery library installed.

Let’s get down to work.

1. Head over to github and download the latest plugin package.

2. Unzip the package.

3. Copy over jquery.mCustomScrollbar.js into your theme’s JavaScript folder.

4. Copy over jquery.mCustomScrollbar.css into your theme’s CSS folder.

5. Copy over mCSB_buttons.png into your theme’s images folder.

6. Open jquery.mCustomScrollbar.css, search for “mCSB_buttons.png.” Change the line background-image: url(mCSB_buttons.png); to background-image: url(images/mCSB_buttons.png);.

7. Open functions.php in your preferred code editor. Search for  wp_enqueue_script. You will likely see multiple instances, as wp_enqueue_script is the official and standard way of adding scripts to WordPress.

8. Just after the last instance of wp_enqueue_script, add the following snippet and save.

wp_enqueue_script( 'my-custom-scrollbar', get_template_directory_uri() . '/js/jquery.mCustomScrollbar.js', array(), '20170323', true );

9. While still in functions.php, search for wp_enqueue_style and just after this line add the following snippet:

wp_enqueue_style('my-custom-scrollbar-style', get_template_directory_uri() .'/css/jquery.mCustomScrollbar.css' );

10. Open footer.php and search for <?php wp_footer(); ?>. Just after this line, add the following snippet:

<script>
jQuery("body").mCustomScrollbar({
                    axis:"y",
                });
</script>

Note: You should replace “body” in the code snippet above with your chosen selector. In this case, I wanted to customize the default browser window scrollbar. Let’s say you wanted to customize an element with the class .MyClass. The snippet would change to:

<script>
jQuery(".MyClass").mCustomScrollbar({
                    axis:"y",
                });
</script>

I hope that in the future there will be a standard, straightforward, and non-JavaScript way to customize the default browser scrollbar. In the meantime, jQuery is an easy-enough way to do it.