+ 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