
How to Add a Custom Scrollbar in WordPress
Scrollbar may be a tiny detail on your website, but just because it is small, it doesn’t mean you have to stick to its default look. If rocking a unique visual identity is one of your priorities, here’s the good news – on WordPress websites, there is always a possibility to change the scrollbar and adjust it to your theme, style, and color scheme.

There are two ways to customize the scrollbar. The easier one is installing the plugin, which doesn’t require any coding skills. The other way is to insert Additional CSS in WordPress settings.
Using the Advanced Scrollbar Plugin
The Advanced Scrollbar is a free plugin, so you can find it in the WordPress plugin library. Navigate to the admin panel and click on Plugins > Add New to open the library. In the search bar, type “Advanced Scrollbar” and click on the result.
Install the plugin and don’t forget to activate it using the activation link. The plugins don’t work if they are not activated.

After you activate the plugin, you’ll be able to change its settings. Navigating to the Settings in the main menu on the dashboard. Click on Custom Color Scrollbar Settings.

These are default settings.

This is how the scrollbar looks like with the default settings.

If you want to change the basic settings, you can tweak the scrollbar and rail background color.

Additionally, you can set the mouse scroll speed, scrollbar speed, and the option to hide the scrollbar automatically. You can also choose whether the scrollbar will have a left or right alignment. There is also an option to enable displaying the scrollbar on touch devices such as mobile phones and tablets.

The additional settings to change your scrollbar’s style are in the second tab, Scrollbar Custom Style Settings. Here you can change the scrollbar width, border CSS and border radius.

This is the end result of our changes.

Using the Additional CSS
The second solution for adding a custom scrollbar to your WordPress site requires a little bit of coding knowledge. If you have no experience with programming yet still want to add a custom scrollbar this way, follow the instructions carefully.
To add a custom CSS site-wide, navigate to the main menu in the dashboard and click on Appearance > Customize.

Click on the Additional CSS field.

Paste the following code to the Additional CSS box.
::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f8c1c0; border:1px solid #fff; } ::-webkit-scrollbar-thumb { background: #bededa; border:1px solid #fff; height:300px; border-radius:4px; }

When you add CSS, click on the Publish button and check the result. Keep in mind that this code will work on all Internet browsers, except on Firefox and Edge.
Conclusion
These are two simple ways to add a custom scrollbar in WordPress. Both are a viable choice for users with little to no coding experience.
Want to learn more about quick and effortless ways to boost your website’s design and performance? Check out this list of must-have WordPress plugins for starting a new website!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!