How to remove mCustomscrollbar?

Question

I am using Jquery mCustomScrollBar plugin for creating custom scroll bars in my project. But I don't want to have any scroll bars in my web pages once they are re-sized below 650 . There is also another problem , when I am re-sizing the window multiple scroll bars are coming. Can anyone please show me how to solve these two problems ? Thanking you in advance .

Answer 1

If you're invoking a custom scroll through a javascript function, then the first line of your code should be to clear any custom scroll bars.

$(selector).mCustomScrollbar('destroy');

Then initialize your custom scrollbar to the same selector

$(selector).mCustomScrollbar({ your options here });

At the very end you just have to create a window resize() listener and create conditions based on the window size.

Partial function example:

function initCustomScrollbar() {
    var $selector = $(selector);
    $selector.mCustomScrollBar('destroy');
    $selector.mCustomSCrollbar({ yourOptionsHere });
    $(window).resize(function() {
        if(window.innerWidth > 1000) {
            initCustomScrollbar();
        } else {
            $selector.mCustomScrollBar('destroy');
        }
    });

I have a working example but I didn't test the code above, you get the idea though.