How to implement on scroll action in lightning to show next few list of records

Question

I want to render many(about 1000) components and I am displaying them through aura:iteration in another aura:iteration. This is causing me performance issues. I want to display only 10 records at an instance, and on scroll of mouse, load next 10 and so on...It should be like the way feed is loaded on a FB page or chatter. Any ideas how can this be implemented?

markup:

<aura:iteration var="outerListElement" items="{!v.listOfLists}">
   <tr>
      <aura:iteration var="singleEntry" items="{outerList">
       <td >
           <div class="slds-truncate">
               <c:newComponent singleEntry="{!singleEntry}" outerListElement="{!outerListElement}" attr1="{!v.attr1OfParent}">
           </div> 
       </td>
      </aura:iteration>
   </tr>
</aura:iteration>

Answer 1

You could implement infinite scrolling similar to what I did for my custom Lightning Component that renders data table.

In your main component's render.js file attach a listener to the window.onscroll event. As the user scrolls down the page the below code detects once the user has neared the bottom then can take action. In my example, I invoke helper.getNextPage( component );

For your purposes, you might start with {!v.listOfLists} holding only 10 elements to start with, and then as the user scrolls you append more elements to the list.

Note, the below solution stores the JavaScript interval id in v.setIntervalId attribute of the component so that the polling can be stopped when the component is unrendered / destroyed.

({
    afterRender : function( component, helper ) {

        this.superAfterRender();

        // this is done in renderer because we don't get
        // access to the window element in the helper js.

        // per John Resig, we should not take action on every scroll event
        // as that has poor performance but rather we should take action periodically.
        // http://ejohn.org/blog/learning-from-twitter/

        var didScroll = false;

        window.onscroll = function() {
            didScroll = true;
        };

        // periodically attach the scroll event listener
        // so that we aren't taking action for all events
        var idOfSetInterval = window.setInterval( $A.getCallback( function() {

            // Since setInterval happens outside the component's lifecycle
            // We need to check if component exist, only then logic needs to be processed
            if ( didScroll && component.isValid() ) {

                didScroll = false;

                // adapted from stackoverflow to detect when user has scrolled sufficiently to end of document
                // http://stackoverflow.com/questions/4841585/alternatives-to-jquery-endless-scrolling
                if ( window['scrollY'] >= document.body['scrollHeight'] - window['outerHeight'] - 100 ) {
                    helper.getNextPage( component );
                }

            }

        }), 1000 );

        // Save the id.We need to use in unrender to remove the setInterval()
        component.set( "v.setIntervalId", idOfSetInterval );
    },

    unrender: function( component, helper ) {

        this.superUnrender();

        // Since setInterval() will be called even after component is destroyed
        // we need to remove it in the unrender
        window.clearInterval( component.get( "v.setIntervalId" ) );
    }
})