How to Customize Scrollbars with CSS in WordPress

Instead of the default boring browser scrollbar, you must have noticed a nicely designed, color matching scrollbar on some web sites. That’s a visually customizeds scroll bar and it enhances the overall look of the website. Here you’ll learn how to Customize Scrollbars with CSS in WordPress and make your web site stand out from the mass.

Note: A scrollbar customized with CSS works only in Webkit based browsers such as Chrome, Safari and Opera.

Why Customize Scrollbars with CSS ?

There are three ways to create custom scrollbars in WordPress:

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

So, why should you rather customize your web site scrollbar with CSS instead of using a plugin or a Javascipt or jQuerry script?

The simpliest solution to create a customized scroll bar in WordPress is to install a custom scrollbar plugin. By using a plugin the scrollbar is easily customized by setting up a couple of options in the plugin’s settings screen. No need for any coding knowledge in this case. The custom scrollbar will work nicely in all desktop and mobile browsers. The downside of this method is that plugins slightly affect the web site loading speed. Nowadays loading speed matters significantly to some web site owners, and also many developers are trying to avoid using a lot of plugins.

Custom scrollbar Javascipt or jQuerry scripts usually work nicely in all browsers and devices. However, this method of customizing scroll bars requires some coding experience, and also can slightly affect the loading speed.

Custom scrollbar CSS code is rather simple it’s implementation requires only basic knowledge of CSS. With only a dozen lines of CSS code this method of customizing scroll bars doesn’t affect web site loading speed at all. On the other hand, the downside of this method is that only Webkit based browsers support it. Since a large majority of browsers nowadays are Webkit based (Chrome, Opera, Safari…), it makes sense to use this method to customize scrollbars and spare a couple of miliseconds of loading time.

Customize Scrollbars with CSS code is the best option if maintaining low web site loading speed is a priority.

Basic example of Custom scrollbar CSS code

To start customizing your web site scroll bar with CSS, firstly locate your theme’s stylesheet file within the WordPress Theme editor. Make sure you are editing your Child theme, so the modifications don’t get lost when updating the main theme. For easier code editing we suggest you use a Syntax Highlighting plugin.

There are two main CSS pseudo elements for customizing the scrollbar:

• ::-webkit-scrollbar – the scrollbar container
• ::-webkit-scrollbar-thumb – the draggable “handle” used for scrolling

In this basic example, firstly we’ll adjust the width of the scrollbar container and change it’s color. Secondly, we’ll change the color of the scrolling handle and make it round on it’s ends. Just enough to differentiate our scrollbar from the default one.

Here’s the CSS code to copy inside your heme stylesheet, modify it at your will:

::-webkit-scrollbar {
width: 15px;
background: pink;
}

::-webkit-scrollbar-thumb {
background: purple;
border-radius: 15px;
}

Advanced example of Custom scrollbar CSS code

We’ll get a bit more fancier in this example of Custom scrollbar CSS code. To furhermore customize the look of the scroll bar we’ll introduce few more CSS pseudo elements:

• ::-webkit-scrollbar-track – the active area of the scrollbar container (progress bar)
• ::-webkit-scrollbar-button – clickable buttons on the both ends the scrollbar container (arrows by default)

As in the previous example, firstly we’ll set the color and width of the scrollbar container using the ::-webkit-scrollbar pseudo element. We’ll also style the scrolling handle using the ::-webkit-scrollbar-thumb pseudo element. This time we’ll enhance the look of it with some box shaddow.

Secondly, using the ::-webkit-scrollbar-track pseudo element, in this example we’ll define the look of the active scrolling area. We’ll add some vertical margin here (optional) to make some room between the progress bar and the scrollbar container ends.

Finally, we’ll add the clickable buttons on the top and bottom of the scrollbar using the ::-webkit-scrollbar-button pseudo element. To make it visually different from the default buttons we’ve made them round, using the border-radius property.

We made the scrollbar a bit more interactive with hover effects on the draggable handle and clickable direction buttons. You can try different hover effects on all scrollbar pseudo elements to customize it even more.

This is our advanced example CSS code, modify it’s properties to customize it at your will:

::-webkit-scrollbar {
  width: 15px;
  background: darkorchid; 
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px gray;
  border-radius: 15px;
  background: pink;
  margin:	5px 0;
}

::-webkit-scrollbar-thumb {
  background: purple;
  border-radius: 15px; 
  box-shadow: inset 0 0 5px black;
}

::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 10px black; }

::-webkit-scrollbar-button {
 background: whitesmoke;
 box-shadow: inset 0 0 5px pink;
 border-radius: 15px; 
border: 3px solid darkorchid;
}

::-webkit-scrollbar-button:hover {  box-shadow: inset 0 0 3px purple; background: pink;}

More on how to Customize Scrollbars with CSS

To learn more about customizing scroll bars with CSS, the W3S custom scrollbar page is a good place to start exploring.

Custom scrollbar plugins for WordPress

If the possibilities of scroll bar customization with CSS doesn’t satisfy your needs, perhaps you should try using a plugin. We tested and reviewed a couple of custom scrollbar plugins for WordPress in our article:
How to create a Custom Scrollbar in WordPress