Scrolling to the bottom of a spark List

Scrolling to the bottom of a spark List after adding an item can be a little tricky especially when adding multiline text. This post demonstrates how to do it using a chat pod as a sample use case.

This example validates the List then tries to scroll to the end using the getVerticalScrollPositionDelta() method on the layout. Notice that there is a loop that possibly validates the List up to 10 times. This is because sometimes we may need to scroll several times in virtual layout as some items may not be loaded yet and their size is only estimated.

This loop is a little bit ugly and there is a bug filed at SDK-25740 to make this use case easier. Please vote for that issue if you would like to see that functionality implemented.

Here is an example of it in action, type in a bunch of messages and notice that the List scrolls automatically as you would expect in a typical chat pod:

View Source

Note: This sample requires Flex SDK 4.0.0 or higher. You can get the latest SDK builds from opensource.adobe.com.

12 thoughts on “Scrolling to the bottom of a spark List”

  1. Awesome. I never would have dug this one out on my own. Or if I did it would have taken ages.

    The just assumes that it is a top-down oriented list. It would be great if we had something like renderBottomToTop that we could set to make it behave properly for situations like your example.

  2. Jeez, thanks. I’ve been trying to solve this for a long time.

    I found that to make it work right I had to do “callLater(scrollToBottom)” whenever the collection changes or the control is resized.

    Also, I added a feature: if the user scrolls up from the bottom I don’t want it to scroll back to the bottom when items are added, as is common in chat logs like this.

    private var lastChatMaxScroll:Number;

    // add as List.resize handler and List.dataProvider COLLECTION_CHANGE handler
    private function resetScroller(event:CollectionEvent):void {
    if (chatList.scroller.verticalScrollBar.value + 5 >= lastChatMaxScroll) {
    callLater(scrollToBottom());
    }
    else {
    lastChatMaxScroll = chatList.scroller.verticalScrollBar.maximum;
    }
    }

    private function scrollToBottom():void { // slightly modified
    var delta:Number = 0;
    var count:int = 0;
    while (count++ < 10){
    chatList.validateNow();
    delta = chatList.layout.getVerticalScrollPositionDelta(NavigationUnit.END);
    chatList.layout.verticalScrollPosition += delta;
    lastChatMaxScroll = chatList.scroller.verticalScrollBar.maximum; // new!
    if (delta == 0)
    break;
    }
    }

  3. You can also just simply set the scroll position to Number.MAX_VALUE every time after validateNow() and not worry about deltas or loops.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>