Custom Scrollbar – WordPress Plugin

Solve Issues of Too Long Elements with Custom Scrollbars

It is always a problem that you get a very long HTML element that breaks the site layout. Because the element is too long, if the visitor scrolls down towards the bottom in certain extent, the other areas of the page become empty and give an impression that the layout is unbalanced. Custom Scrollbar is a WordPress plugin that solves this problem by letting you set a custom scrollbar to such an element and keep the element compact to your set dimension so that it won’t break the design.

Not only it helps shorten long elements but also it helps customize the look of scrollbars. The browser’s default scrollbar design may not fit in your site. To change the look, change colors and just pick a pre-defined theme.

How to set up a Custom Scrollbar

Specify the element with a CSS/jQuery selector and pick colors and themes that suite your site design. That’s it. There you go. The problematic long element will be shorten with a nice looking scrollbar.

Set Preferred Colors

Customize your element scrollbar by changing the color to fit in your site design.


You can pick a theme from various pre-defined themes.

Supporting Themes- Custom Scrollbar WordPress Plugin

Scroll Buttons

For touch devices, buttons will be useful. You can also set how many length it scrolls.

Scroll Buttons - Custom Scrollbar WordPress Plugin

Supports Responsive Design

By setting screen widths, you can define which screen widths the scrollbar should appear. This means you can enable/disable the scrollbar when the visitor’s browser is in certain widths.

Responsive Option - Custom Scrollbar WordPress Plugin


5 thoughts on “Custom Scrollbar – WordPress Plugin

  1. Wayne Lee


    I wanted to purchase the pro version of this plugin, however, there is an issue that I would like to solve before I am able to do that.

    The sidebar widgets have the same classes: .woocommerce-widget-layered-nav-list.

    The problem is, if I make changes to 1, it will make changes to all of the widgets. I have tried use plugins like However, it will make turn the header to be part of the scrollable as well.

    Do you have any idea how can i assign different classes to different widge list? I believe that would solve the problem.

    Thank you in advance

    Wayne Lee

    1. Michael Uno Post author

      You can narrow in the target elements by using ascendant selectors. Looking at your web site source code, there is the shop_sidebar class in the sidebar element. So you may try something like .shop_sidebar .woocommerce-widget-layered-nav-list.

  2. Nigel


    Just purchased and loaded the Pro version of the scrollbar after using the free version.

    I can’t get the UI to show in the WP menu bar and there seems to be no indication of how to add the key and no supporting documentation.

    1. Michael Uno Post author


      You need to activate both the free and Pro version. So please try that.

      By the way, you can use the priority email support. You can find the address on the email purchase receipt.

Leave a Reply

Your email address will not be published. Required fields are marked *