I am trying to initialise and destroy a mCustomScrollBar scrollbar plugin depending on the window's width (some jquery in an es6 app, traspiled using webpack/babel). However I get an error when resizing the window:

"Uncaught TypeError: $(…).mCustomScrollBar is not a function".

Here is my code:

function initCustomScrollbar() {
    var scrollPane = document.querySelector(".scroll-content");
    var scrollPaneInit = $(scrollPane).mCustomScrollbar();

    setTimeout(function () {
        var scrollInnerPane = $(scrollPane).find(".mCustomScrollBox");
        $(scrollInnerPane).height(window.innerHeight + "px");
    }, 500);

    $(window).resize(function () {
        if (window.innerWidth < 768) {
            initCustomScrollbar();
        } else {
            $(scrollPane).mCustomScrollBar('destroy');
        }
    });
}

initCustomScrollbar();

Can someone point out where I m going wrong?

I am trying to initialise and destroy a mCustomScrollBar scrollbar plugin depending on the window's width (some jquery in an es6 app, traspiled using webpack/babel). However I get an error when resizing the window:

"Uncaught TypeError: $(…).mCustomScrollBar is not a function".

Here is my code:

function initCustomScrollbar() {
    var scrollPane = document.querySelector(".scroll-content");
    var scrollPaneInit = $(scrollPane).mCustomScrollbar();

    setTimeout(function () {
        var scrollInnerPane = $(scrollPane).find(".mCustomScrollBox");
        $(scrollInnerPane).height(window.innerHeight + "px");
    }, 500);

    $(window).resize(function () {
        if (window.innerWidth < 768) {
            initCustomScrollbar();
        } else {
            $(scrollPane).mCustomScrollBar('destroy');
        }
    });
}

initCustomScrollbar();

Can someone point out where I m going wrong?

• javascript
• jquery
• jquery-plugins
• ecmascript-6

• Maybe you are not loading the plugin. – Felix Kling Commented Dec 24, 2016 at 2:44
• Its definitely loading, unless i would receive a 404 error... – vicgoyso Commented Dec 24, 2016 at 3:15
• Not if you forgot to include the plugin. – Felix Kling Commented Dec 24, 2016 at 3:19
• Its definitely loading, when I view source and click the link it loads the minified script. – vicgoyso Commented Dec 24, 2016 at 3:23

1 Answer 1

I have solved the problem, somehow my subconscious forgot Javascript was case sensitive... the function should read:

$(scrollPane).mCustomScrollbar();

not

$(scrollPane).mCustomScrollBar();

smh!!!