3

When scrolling action occurs for content inside ui:scrollerWrapper, I want to detect that and execute some javascript after that.

I have tried to add scroll event handler to the div that is inside ui:scrollerWrapper. But it doesn't listen to scroll event. I have tried to add listener to div that has "body" rendered inside it, but that doesn't work either.

Note 1 : "body" attribute contains dynamically created components.

Note 2 : I want to keep using ui:scrollerWrapper 'cause it's working nicely for me in iPad and desktop :)

Following is my code:

Markup:

<ui:scrollerWrapper aura:id="scrollWrapper" class="scrollerSize">
    <div aura:id="scrollWrapperDiv" class="slds-card slds-p-around_small">
        <aura:if isTrue="{!v.isLoading}">
            <c:card isLoading="{!v.isLoading}" />
        </aura:if>
        <div class="{!v.isLoading ? 'slds-hide' : 'slds-show'}" >
            <div class="slds-col slds-size_12-of-12">
                <div aura:id="contentDiv" class="{!v.areItemsEmpty ? ' slds-hide' : ''}">
                    {!v.body}
                </div>
            </div> 
        </div>
    </div>
</ui:scrollerWrapper>

Renderer:

afterRender : function( component, helper ) {

    this.superAfterRender();
    var scrollContent = component.find('scrollWrapperDiv').getElement();

    //Tried this, Doesn't listen to scroll:
    //var scrollContent = component.find('contentDiv').getElement();


    //Throws error. Understandable due to locker constraint.
    //var scrollContent = component.find('scrollWrapper').getElement(); 

    var mod = scrollContent.addEventListener('scroll', function(event) {
        component.set('v.scrollTopValue', scrollContent.scrollTop);
    });                
},
2
+50

Looking at the source code of ui:scrollerWrapper here: https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/scrollerWrapper/scrollerWrapper.cmp

I can see that there is no external event or action that allows to capture a scrolling event.

Unfortunately ui:scrollerWrapper isn't extensible so you can't inherit from it. However the component isn't very complex so I suggest that you copy it and create your own that fires a custom onScroll event. You can probably fire it from this line in the helper.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.