How to Add a Custom Scrollbar in WordPress

If there’s one word you would associate with WordPress, it would be “customizability.” That’s what all the core features, plugins, and themes are for – to mold the appearance and behavior of your website and make it fit your desires and needs. That’s why you get to do awesome things like customize website colors, add different elements like pricing lists, and just generally use the things you need to make the website look and play the part you have in your mind for it.

There are, of course, some customizable elements people tend to overlook. The scrollbar, that bar in your browser that moves as you scroll a page and lets you navigate through long pages faster, is one of them. If you want the people visiting your website to be treated to a scrollbar that at least matches the color-scheme of your website, you can make it happen.

In this article, we’ll show you:

What Are Your Options for Adding a Custom Scrollbar in WordPress?

If you’re thinking about adding a custom scrollbar to your WordPress website, the two main options you’ll have are to pick a plugin or to customize the scrollbar using CSS. Both of these options have their pros and cons that might influence your choice.

If you use the plugin to add a custom scrollbar, you’ll create a lasting change – as long as the plugin is installed. It’s as simple as installing a plugin and playing around with the settings until you’ve found what works best for you.

The downside of using the plugin is that it might slow down your website. Even if it’s just milliseconds, these tend to add up when you use enough of these small and seemingly inconsequential plugins.

You won’t have speed issues when using CSS, however. You won’t have to install anything – you’ll be able to make all the changes through the appearance customer at Appearance > Customize > Additional CSS. The code isn’t too hard to learn, either. The customizer will show you the changes in real-time, which is a neat bonus.

The problem with this method is, however, that you risk losing your customizations with a theme update. This is why it’s generally recommended to use a child theme when making these types of changes.

How to Add a Custom Scrollbar in WordPress Using a Plugin

There are a couple of free plugins you can use to add a custom scrollbar to your WordPress website. We’ll use the Scroll Styler plugin, as it allows you to set up to four colors on your scrollbar. Head over to Plugins > Add New, search for “scroll styler”, and then go ahead and install and activate it on your website.

After installing the plugin, head over to Settings > Scroll Styler to access the plugin options. The topmost two are scrollbar width and scrollbar track padding. The first of the two will change how wide your scrollbar is, in pixels. The second one will change the padding around the scrollbar thumb.

The next four options will let you set the different colors for the scrollbar. Scrollbar track background color is the color of the scrollbar track, and it doesn’t change. The color of the thumb does, however. “Background color” is the thumb’s color when it’s not active. When you hover over the thumb with the cursor, it will change its color to “hover background color.” When you press the thumb to scroll the page, it will change its color to “active background color.”

The final option allows you to set the scrollbar thumb border radius. Effectively, this lets you round off the corners of the thumb.

Once you’ve chosen the options, don’t forget to save the settings and you’ll see the change on your website.

While the range of options offered by the plugin might be a bit modest, it can be more than enough to create a scrollbar that fits your website’s color scheme.

How to Customize the Scrollbar Using CSS

Your second option would be to use custom CSS to change the way the scrollbar looks. As we mentioned before, you’ll need to navigate to Appearance > Customize > Additional CSS to make any changes.

The way to use custom CSS to change the scrollbar is by using pseudo-elements to customize certain parts of the scrollbar. You can customize:

So when you want to create a custom scrollbar, you can use these pseudo-elements like this:

::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
} 
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}

This will turn the default grey scrollbar into something that’s a better match for this particular theme.

Remember that you can add shadows, change the radius of the elements, and do additional things to make your custom scrollbar truly special. You will need more advanced knowledge of CSS to take full advantage of this method of customizing the scrollbar. Then again, if you have enough time on your hands and are willing to learn through trial and error – you’re bound to come up with some interesting combinations.

Let’s Wrap It Up!

The scrollbar – a useful element that’s often overlooked when it comes to customizing the looks of your website. If this is a wrong you aim to right, you have two ways of doing it – either with a plugin or by adding some custom CSS. Each of the two has its pros and cons, so checking which browsers your audience uses the most might be prudent before making the choice. After that, it’s just tinkering with the options or the code until you get satisfactory results.