1

I am working on building a infinite scroll/lazy loading functionality on my custom table. I found the following code to detect the the scroll has reached to end :

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

Below is my component custom table code :

<ltng:require scripts="{!$Resource.Jquery3_4_0}" afterScriptsLoaded="{!c.doInit}" /> 
<div class="testflux" id="flux" >
    <table class="slds-table">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th>Name</th>
                <th>Amount</th>
                <th>Created Date</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.appsInOppList}" var="wrapObj">
                <c:AppsInOutAccountRowComponent oppList="{!wrapObj.oppList}" />
            </aura:iteration>
        </tbody>
    </table>
</div>

Controller.js

doInit: function (component, event, helper) {
        $(document).ready(function() {
            console.log("documentReady");
            $('#flux').on('scroll', function() {
                if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    alert('end reached');
                }
            });
        });
    }

css

.THIS .testflux{height:150px;overflow:auto;}

The Jquery code is working fine on doinit. The same jquery code is not working(alert not firing) when table used inside lightning:tabset . Below is the code :

<ltng:require scripts="{!$Resource.Jquery3_4_0}" afterScriptsLoaded="{!c.doInit}" />
<lightning:tabset>
    <lightning:tab label="Tab1" id="1">
        <div class="testflux" id="flux">
            <table class="slds-table">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>Name</th>
                        <th>Amount</th>
                        <th>Created Date</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.appsInOppList}" var="wrapObj">
                        <c:AppsInOutAccountRowComponent oppList="{!wrapObj.oppList}" />
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </lightning:tab>
    <lightning:tab label="Tab2" id="2">
    </lightning:tab>
</lightning:tabset>

Not able to figure out the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.