Always get "mCS_no_scrollbar" on the div that I want to have the custom scrollbar

[awkurniawan]

Hi,

I'm currently working on a wordpress blog for my company that has an issue with class .mCS_no_scrollbar always added to the div.

I have 2 divs which I want to apply this scroll bar.

(function($){
$(document).ready(function(){
    $("#sidebar-wrapper, #wrapper").mCustomScrollbar({
        theme: "minimal-dark"
    });
});
})(jQuery);

The div that always has .mCS_no_scrollbar is #wrapper.

Website is here http://blog.socialimage.com/

Looking forward to your help on this issue. Thanks!

[malihu]

Hello,

mCS_no_scrollbar class on the element means that the script cannot find any scrollable content. This happens because your #wrapper element does not have any kind of height set (which is required by the plugin script).

You can do any of the following:

• Give the #wrapper a CSS fixed height (or max-height), e.g. #wrapper{ height: 600px; }
• Give it a non-fixed height CSS like #wrapper{ height: 100%; }. This will work after you've set your root element(s) height, e.g. html, body{ height: 100%; }
• Instead of adding the scrollbar on #wrapper, add it on #page-content-wrapper (will probably work better with your fixed red header).

[awkurniawan]

Looks like the real problem was because my ISP injects a script for their advertising purpose. Those recommendations didn't work until I removed the ads script from my ISP and now I use your last recommendation and it works!

One more question, if I want to move the scroll bar little bit to the right (there's about 5px margin from the right side of the divs), which class should I overwrite?

Thanks.

[malihu]

The class of the scrollbar container is mCSB_scrollTools and it's position is absolute, so you can change it like this: .mCSB_scrollTools{ right: 0; }

If you want to overwrite any CSS you can add a more specific selector, for example: #page-content-wrapper .mCSB_scrollTools_vertical{ right: 0; }

[awkurniawan]

Sorry, your suggestions didn't work, I still got spacing on the right side. But, it's not a big deal, I will try to find out by myself.

Thanks for your help.

[malihu]

If you can update your link I'd be able to see what's exactly needed and help more. In any case, scrollbar position is determined via plugin CSS file.

[insight47]

Hi malihu, I receive the same symptom @ https://www.insightdesign.com.au/

body has a height of 100%, and .mob-menu-content has height: 96vh.

Help appreciated.