+ Start a Discussion
PatMcClellan__cPatMcClellan__c 

scrollTo('bottom')

I'm building a Lightning Component that includes a ui:scrollerWrapper, containing an aura:iteration. I want the scroller to default scrollTo the bottom. 

I found this documentation: https://developer.salesforce.com/docs/atlas.en-us.208.0.lightning.meta/lightning/aura_compref_ui_scrollerWrapper.htm? that lists the Methods, including scrollTo(destination) where destination is a string with options "top", "bottom", "left" and "right".  But I can't figure out where to put that method.

My component markup:
 

<ui:scrollerWrapper class="scrollerSize" aura:Id="scroller">

        <aura:iteration items="{!v.messages}" var="message">
            <c:MessageTile message="{!message}" inits="{!v.conversation.GroupInits__c}"/>
        </aura:iteration>

    </ui:scrollerWrapper>
My css:
.THIS.scrollerSize {
    height: 400px;
}
I tried this in the doInit handler:
var scroller = component.find("scroller");
scroller.scrollTo('bottom');
But it doesn't work.

Advice?

 
Best Answer chosen by PatMcClellan__c
PatMcClellan__cPatMcClellan__c
For anyone who happens upon this thread, I figured out the issue. I was calling the updateScroll function during the page initialization, but it doesn't work until after the scrollerWrapper is rendered. I was able to get it to work by creating a Renderer.js with the following code:
 
({
    afterRender : function(component, helper){
        this.superAfterRender();
        helper.updateScroll(component)
    },
})

 

All Answers

PatMcClellan__cPatMcClellan__c
Do I need to provide additional params? I've tried -- as well as various values for the 3rd param:
updateScroll : function(component, event, helper){
        console.log("updateScroll");
        var scroller = component.find("scroller");
        scroller.scrollTo("bottom",0,0);
    },
Nothing seems to work.
 
PatMcClellan__cPatMcClellan__c
For anyone who happens upon this thread, I figured out the issue. I was calling the updateScroll function during the page initialization, but it doesn't work until after the scrollerWrapper is rendered. I was able to get it to work by creating a Renderer.js with the following code:
 
({
    afterRender : function(component, helper){
        this.superAfterRender();
        helper.updateScroll(component)
    },
})

 
This was selected as the best answer
Jaap ScheperJaap Scheper

Hi PatMcClellan__c,

I 'm just curious.. I use a lightning:map component to view the map with a fixed height. At the left I have a vertical bar with all my markers, like this:
Map with many markers

I can scroll up and down in this list on a computer, works fine. On the iPad, I can drag the list upwards, works fine. But, on teh iPad, when I drag downwards, the page always refreshes. The workaround is to first drag upwards (only a few pixels is enough), then downwards -> only then the list with markers will scroll up.

I copied the source (https://github.com/forcedotcom/aura/tree/master/aura-components/src/main/components/ui/scrollerWrapper) but this didn't work at all. The handleTouchstart and handleTouchmove actions are called perfectly, but the scrollTo method isn't called. The component seems missing firing and catching the scrollTo event. I couldn't get this done in a timely fashion.

Is there something you could recommend me?

PatMcClellan__cPatMcClellan__c
I suspect what's happening is that the iPad's UI automatically refreshes (any app) on pull down. I don't know the events for iPad, but you may be able to override them with an event listener, or possibly with css. When I have a scroll div, I typically put a parameter in the css to contain the scroll, which prevents the scroll command from passing to the page after I reach the bottom of the scrollable content. You might try that first... Just Google "css contain" for docs.