2

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

I found the ui:scrollerWrapper documentation where they mention a scrollTo method, but I can't seem to get it to work.

My markup:

<ui:scrollerWrapper aura:id="scroller" class="scrollerSize" >
    <aura:iteration items="{!v.Messages}" var="Message">
        <c:MessageTile Message="{!Message}" />
    </aura:iteration>
</ui:scrollerWrapper>

My css:

.THIS.scrollerSize {
     height: 400px;
  }

My controller handler:

updateScroll : function(component, event, helper){
    var scroller = component.find("scroller");
    scroller.scrollTo("bottom");
}

It finds the scroller component -- I did a console.log(scroller) in my handler and it returns:

 markup://ui:scrollerWrapper {17:0} {scroller}{ key: {"namespace":"c"} }

It doesn't throw an error on the scroller.scrollTo("bottom") line, but it doesn't scroll.

What am I missing?

5
  • Is the element large enough to scroll? Make sure that there's enough height for it to make a difference.
    – sfdcfox
    Commented Nov 28, 2017 at 23:32
  • Yes, at least 2x context for available height. Commented Nov 29, 2017 at 0:08
  • I meant... content Commented Nov 29, 2017 at 0:09
  • I figured out the issue: I was calling the updateScroll function BEFORE the scroller was rendered. It works when I call it from afterRender. Commented Dec 8, 2017 at 0:49
  • ah. Makes sense. Perhaps add an answer for that? It could help others.
    – sfdcfox
    Commented Dec 8, 2017 at 1:04

1 Answer 1

0

I figured out the issue: I was calling the updateScroll function BEFORE the scroller was rendered. It works when I call it from afterRender.

1
  • 1
    Can you please accept this answer so it no longer shows up as an open question?
    – Adrian Larson
    Commented Apr 19, 2019 at 23:04

You must log in to answer this question.

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