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 .

Faydra

did my post answer your question? – Crossopterygian

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.

Crossopterygian

$(selector).mCustomScrollbar('destroy'); gives me an error: Uncaught TypeError: Cannot read property 'autoUpdate' of undefined – Communion

@Communion selector is the element you're trying to wrap with jQuery. See api.jquery.com/id-selector on how to do that. – Crossopterygian

I know, thanks ) selector is just an example. mine is different. but still – Communion

.mCustomScrollbar('destroy') doens't work: Cannot read property 'autoUpdate' of undefined – Thenceforth

@Thenceforth I'm not sure if mCustomScrollBar has evolved in the last 5 years but if the destroy function doesn't work for you then I'd start debugging through JS why it's throwing that error within the library. The logic here is simple to fetch the element with custom scroll bar attached and then re-apply it. I believe even in the case where the selected element doesn't have a custom scroll bar it won't fail but instead just don't do anything. – Crossopterygian

the selected element doesn't have a custom scroll bar it won't fail but instead just don't do anything... EXACTLY! I was clearing the content before destroying the the customScrollBar, and that was the reason of the failure. Thanks – Thenceforth