Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Add a Custom Scrollbar in WordPress

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Add a Custom Scrollbar in WordPress

Have you ever come across a site that has custom scrollbars? Some websites and web apps add custom scrollbars to meet their site’s UI or brand colors. In this article, we will show you how to add a custom scrollbar in WordPress without writing any code.

A custom scrollbar in action

A Custom scrollbar can be added with CSS into any WordPress website, but due to browser compatibility issues this solution is not ideal for beginners. But as the saying goes, there’s a plugin for that.

First thing you need to do is install and activate the Dewdrop Custom Scrollbar Plugin. Upon installation, you need to go to Settings » Dewdrop Scrollbar Options to configure the settings.

Choosing colors and borders for custom scrollbar

On the plugin settings page, first thing you need to configure is the scrollbar color. Then select width for your scrollbar, the default width is 12px. You can also adjust the width and color of the scrollbar border. Lastly, you can set the border radius for the scrollbar. The default border radius for custom scrollbar is 3px. Once you are done, save your settings.

Now head over to your website, and you will see your custom scrollbar in action. Feel free to customize the look of your scrollbar until you get the desired result.

We hope this article helped you add a custom scrollbar in WordPress.

If you liked this article, then subscribe to our YouTube Channel for more WordPress video tutorials. You can also join us on Twitter and Google+.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. ash says:

    it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own ;)


    ::-webkit-scrollbar {
    width: 14px;
    background-color: silver;

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: silver;

    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: #0099cc;

    • Vas says:

      Excellent…The cleanest solution.
      It would be nice to post the code for Firefox…if there is such option.

      Thanks for sharing.

  2. WPBeginner Staff says:

    There might be someway to override it through a custom css. Please contact plugin’s support.

  3. Karen says:

    What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!

  4. WPBeginner Staff says:

    Thank you for notifying us. Fixed it.

  5. Vernon Trent says:

    please correct your link to the plugin.
    there is a missing S in the url “pluginS”

  6. Guest says:

    Hi the link in the post seems broken may affect your site rank.
    Please place correct link for “Dewdrop Custom Scrollbar” plugin.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.