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!
- 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
4. Copy over
jquery.mCustomScrollbar.css into your theme’s CSS folder.
5. Copy over
mCSB_buttons.png into your theme’s images folder.
jquery.mCustomScrollbar.css, search for “mCSB_buttons.png.” Change the line
background-image: url(mCSB_buttons.png); to
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_styleand just after this line add the following snippet:wp_enqueue_style('my-custom-scrollbar-style', get_template_directory_uri() .'/css/jquery.mCustomScrollbar.css' );
footer.phpand search for
<?php wp_footer(); ?>. Just after this line, add the following snippet:&amp;amp;amp;amp;lt;script&amp;amp;amp;amp;gt; jQuery("body").mCustomScrollbar( axis:"y", ); &amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;
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:&amp;amp;amp;amp;lt;script&amp;amp;amp;amp;gt; jQuery(".MyClass").mCustomScrollbar( axis:"y", ); &amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;