mCustomScrollbar not working when Locker Service is enabled in Salesforce-1

Question

I am having problem when using mCustomScrollbar (GIT Hub) when locker service is activated. During initialization of mCustomScrollbar in the helper, it throws the following error

[TypeError: Cannot create property 'jQuery17209760322836087683' on boolean 'true']

Everything works fine when LOCKER SERVICE is DEACTIVATED.

Please find the code below:-

Component:

<ltng:require scripts="{!join(',',
           $Resource.namespace__StaticResourceName + '/scripts/jQuery_V1.js',
           $Resource.namespace__StaticResourceName + '/scripts/Jquery.mousewheel.min.js',
           $Resource.namespace__StaticResourceName + '/scripts/Jquery.mCustomScrollbar_V1.js',
           $Resource.namespace__StaticResourceName + '/scripts/ScrollBar.js'
           )}" afterScriptsLoaded="{!c.scriptsLoaded}" />

<aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>

 <div class="slds slds-grid slds-wrap scrollableWrap">
    <div class="slds-col slds-size--1-of-1 slds-m-top--small scrollable">
            <table class="slds-table slds-table--bordered" id="myTable" width="100%">
                <tr align="center">
                    <th width="" class="slds-cell-wrap slds-text-align--left" scope="col">
                        <b> Name </b>
                    </th>
                    <th width="" class="slds-cell-wrap slds-text-align--right" scope="col">
                        <b> Amount <br/> </b>
                    </th>                   
                </tr>

            <tbody>
                <aura:iteration items="{!v.subordinateDetail}" var="data" indexVar="row" >
                    <tr>
                        <td align="left" class="slds-cell-wrap slds-text-align--left">
                            <ui:outputText value="{!data.name}" />
                        </td>
                        <td align="right" class="slds-cell-wrap slds-text-align--right">
                            <ui:outputText value="{!data.amount}" />
                        </td>                   
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</div>

Controller:

scriptsLoaded : function(component, event, helper) {
        component.set("v.isResourcesLoaded", true);
}

Helper:

    scrollbar : function(component){
       if(component.isValid() && component.get("v.isResourcesLoaded")){
            $('.scrollable').mCustomScrollbar({
                 axis: 'y',
                 contentTouchScroll: 25,
                 advanced: {autoExpandHorizontalScroll:true},
           });
            $('.scrollableWrap').mCustomScrollbar({
                 axis: 'x',
                 contentTouchScroll: 25,
                 advanced: {autoExpandHorizontalScroll:true},
            });
       }
    }

Renderer:

({
    afterRender: function(component, helper) {
        this.superAfterRender();                    
    },
    rerender: function(component, helper) {
        this.superRerender();   
        helper.scrollbar(component);
    }   
})

isResourcesLoaded is a Boolean attribuite which I'm setting as true in afterScriptsLoaded (to make sure that the external scipts uploaded as static resources have loaded).

Also, I'm calling the scrollbar function from the renderer to make sure that the DOM elements have also loaded successfully.

The above code works fine when locker service is not activated.

But when LS is activated, it throws error.

I had to use mCustomScrollbar as Salesforce still hasn't fixed the Lightning Design System scroll functionality for Salesforce-1.

Answer 1

Please try using Salesforce Lightning CLI to identify issues related to locker service.

LockerService enforces several security features in your code.

1. JavaScript ES5 Strict Mode Enforcement
2. DOM Access Containment
3. Restrictions to Global References
4. Access to Supported JavaScript API Framework Methods Only You can access published, supported JavaScript API framework methods only. These methods are published in the reference doc app at https://yourDomain.lightning.force.com/auradocs/reference.app. In a future release, LockerService will be extended to cover additional security features.
5. Stricter Content Security Policy (CSP)

PS: Salesforce recommends use of secure public API for document, window and element. Only secure APIs will be accessible when Locker Service is enabled even if it is working now it won't work in future. You would also want to go through this checklist if you want to submit your package to salesforce for security review.