Scrolling event within Lightning Component

Question

I'm very new to Lightning component development and I'm trying to update page once user scrolls down to certain height (for this example say 250px)

My component looks like:

<aura:component controller="MyComponent" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >

    //other attributes and also one for scrolling
    <aura:attribute name="scrollAttribute" type="String" access="private"/>
    //attributes end

    <div aura:id="divScroll">
        //all other component elements go in here
        <div>
            ...
            ...
            ...
        </div>
        <div>
            ...
            ...
            ...
        </div>
        <div>
            ...
            ...
            ...
        </div>
    </div>

</aura:component>

Renderer.js file looks like this:

({
    afterRender : function( component, helper ) {
        this.superAfterRender();
        alert('1');
        var didScroll = false;
        component.find("divScroll").getElement().addEventListener("scroll", function() {
            didScroll = true;
            alert('2');
        });
        var scrollAttribute = setInterval( $A.getCallback(function() {
            if (didScroll && component.isValid()) {
                didScroll = false;
                alert('3');
                //add logic here for scroll height and do something
            }
        }), 1000 );

        component.set('v.scrollAttribute', scrollAttribute);
        console.log(component.get('v.scrollAttribute'));
    },
})

I get alert 1 but I never hit other alerts. Could someone please help me with what I'm missing here?

Answer 1

Just put a scroll handler directly on the div, and you can watch the value change, without a watchdog or anything else. This is a pretty standard technique. Here's a small copy-paste example for you.

---

<aura:application >
    <aura:attribute name="pos" type="Integer" default="0" />    
    {!v.pos}
    <hr />
    <div class="wrapper" onscroll="{!c.scroll}">
        <div class="large-area" >
            Scroll area
        </div>
    </div>
</aura:application>

---

({
    scroll: function(component, event, helper) {
        component.set("v.pos", event.target.scrollTop);
    }
})

---

.THIS.wrapper {
    overflow: auto;
    max-height: 80%;
    position: relative;
    width: 100%;
    border: 1px solid black;

}
.THIS .large-area {
    height: 300vh;
    width: 100%;
}