1

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?

0

1 Answer 1

2

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%;
}
1
  • solution is not working my use case is it right? my use case- my modal popup had scroller after i click the button at footer,then if any lightning inputs with validation errors on top i need scroller 'll move to that area automatically.
    – sdandamud1
    Jun 1, 2019 at 14:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .