How to Add a Custom Scrollbar in WordPress
Do you want to add a custom scroll bar in WordPress? By changing the appearance of the scroll bar, you can stand out especially when creating a custom theme for your website.
In this article, we show you how to easily add a custom scroll bar in WordPress. We show you two solutions and you can choose one that suits you best.
Problems with custom scroll bar colours
CSS is not supplied with a rule set that allows you to change the properties of the scroll bar. There are some suggestions to add this, but these are currently not supported by most browsers.
We will show you both techniques. However, please note that you must test your site with different browsers and devices to ensure that it works correctly on all browsers.
That said, let’s see how we can add custom scroll bar colours in WordPress.
Method 1. Add a custom scroll bar in WordPress with a plug-in
This method is simpler and recommended for most users. However, it does not support mobile browsers.
You must first install and activate the Advanced Scrollbar plug-in.
After activation, you must go to the Settings »Custom Color Slider Settings page to configure the plug-in.
From here you can change the scroll bar colour and the background colours of the scroll bar. You can then select the mouse roll step, which is the scroll speed of the mouse wheel.
You can also select whether you want to hide the scroll bar automatically or always show it.
You have the ‘Cursor only’ option that would show the scroll bar, but not the button.
Below you will find options to set the sliding speed, change the rail alignment (left or right) and enable touch behaviour.
Do not forget to click on the Save Changes button to save your settings.
You can now visit your website to see your custom scroll bar colours in action.
Method 2. Add custom scroll bar colours in WordPress using CSS
This method uses CSS to style your scroll bar, which is faster than using jQuery.
However, it only works on desktop browsers using the WebKit rendering engine such as Google Chrome, Safari, Opera and more.
It has no effect on mobile browsers or Firefox and Edge on desktop computers.
You must add the following custom CSS to your WordPress theme.
border:1px solid #ccc;
border:1px solid #eee;
Feel free to change colours and other CSS properties.
If you are satisfied, don’t forget to save your changes. You can then view an example in a supported browser.
This is what it looked like on our demo website while viewing on Google Chrome on a Mac computer.
We hope this article has helped you learn how to add a custom scroll bar in WordPress.