Magento 2 - problem with mCustomscrollbar.js

Question

Since few days i try to fix issue with my mCustomScrollbar plugin and i got stuck.

First of all i i've got library with mCustomScrollbar.js and mousewheel.js in

web/js/mCustomScrollbar

and my script in

web/js .

I added mCustomScrollbar.js and mousewhell.js to requirejs-config with path and shims.

My script looks like:

define([
    'jquery',
    'domReady!',
    'mCustomScrollbar',
    'mousewheel'
],
function ($, mCustomScrollbar) {
    'use strict';
    return function (config, element) {
        $(element).mCustomScrollbar({
            theme: 'dark'
        });
    };
}
);

The problem is - when i open page (where my script is applying) sometimes console shows

Uncaught TypeError: $(...).mCustomScrollbar is not a function

and script doesn't work. Sometimes it works perfect. I don't know why it happens differently. When i open my page first time all looks good when i refresh - it depends, sometimes still works good (no errors, script applied) but sometimes doesn't work (with error above).

Can anyone tell me what wrong i do or why it happens differently?

Answer 1

I have used same jq plugin in my Magento 2 site. I have used "mCustomscrollbar.js" at Product Listing page. Here are the steps to use the js.

1) app/design/frontend/Vendor/Theme/Magento_Catalog/web/js/ : Upload "mCustomScrollbar.js" and "mousewheel.js" js file here. 2) app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/list.phtml add below code in this file.

<script type="text/javascript">
    require(['jquery', 'jquery/ui','Magento_Catalog/js/mousewheel','Magento_Catalog/js/mCustomScrollbar'], function($){
        $(document).ready(function($) {
            $(".am-shopby-form").mCustomScrollbar();
        });
    });
</script>

You can add the options of mCustomscrollbar here as per your requirement. This code is working fine for me. Hope this will help you. :)