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 ones.

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

Sponsored Links



25 thoughts on “Custom Scrollbar – WordPress Plugin

  1. Oddur Bjarnason

    I have made a simple page with a one text area. I have tried to make a scroll bar with the selector .entry-content. This does put a scrollbar on the text area but also on the page as a whole. In addition it puts the same scrollbars on all the sites pages. Can you help me with finding the correct selector?
    The website is – it is a test website.
    The plugin seems to be excellent – although I have not succeeded in using it.

    1. Oddur Bjarnason

      Hi Michael,
      I succeeded in finding a selector for a textfield and make a scrollbar. I was so pleased that I bought the pro version of your plugin.

    1. Michael Uno Post author


      Where do you want to add a scrollbar in the page? Maybe you can mark the area in a screenshot and upload it to somewhere so that I can suggest what to do.

    1. Michael Uno Post author

      Then .list_cal.

      If the element is a JavaScript generated output, oftentimes it won’t work.

    1. Michael Uno Post author

      Hey, thanks for the nice words.

      Let me know what features you need and what are missing.

  2. Mirko Baschetti

    I have a problem with your plugin on
    I’m using vor scrollbars within a facebook feed witch comes from the plugin “Custom Facebook Feed”
    When I click through the menu on Mac/Safari the background get transparent instead of a white background.
    I thought it was a fault from “Custom Facebook Feed”, but their developer wrote me the following:

    > It is the custom scrollbar plugin that is causing the issue. As soon as I deactivate it the feed background works as expected. Here is the feed with the plugin activated (screenshot). Here is the feed with the scrollbar plugin deactivated (screenshot). I think the issue is the overflow hidden property. When I set the following on the feed the boxes work in Safari while the plugin is activated.
    > #cff .mCustomScrollBox{overflow: visible !important;}
    > This does still cause the same issue when scrolling all the way to the bottom of the feed it seems, but it helps to alleviate the initial problem.
    > —–
    > He was able to determine that the issue was related to the “Custom Scrollbar” plugin as disabling that resolved the issue. If you add the CSS snippet he included above to our plugin’s “Custom CSS” section (Customize > Misc > Custom CSS) then it should help to alleviate the problem, but doesn’t fix it entirely.
    > It seems the only solutions would be to either try using a different custom scrollbar plugin, don’t apply a custom scrollbar to those sections, or to add the above CSS which should make the issue noticeable for the vast majority of users – the only people affected would be those scrolling to the bottom of the feeds on Safari on a Mac.

    Could you fix this problem? How much does it cost? Would be great if you answer me soon. 🙂

    1. Michael Uno Post author

      I still cannot access your site. Also I replied to your email but got an automated response from MAILER-DAEMON saying the message could not be delivered. By taking these into account, you should look for somebody else who you can contact smoothly.

    2. Mirko Baschetti

      Are we talking about the website “” and my personal eMail “” ?
      You can’t reach the website and can’t write an eMail???
      Sorry, but there is something wrong with your provider or IP-Blocker….

  3. 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.

  4. 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 *