Spark: automatically set scroller to the end of a list not working properly

I'm using the following mxml code for displaying a list of some data. I built a custom renderer which can have variable height. Each time a new data arrives, the scroller should go to the end of the list. I registered to the events which triggers an array change.

It's working fine if the height of items is the same. But if this is not happening, the scroller is going a little bit above the end.

If the height of an item from the middle of the list is bigger, then the last items are not visible.

Can you give me some hints to solve this problem?

开发者_StackOverflow社区
    <s:Scroller width="100%" height="100%" id="scroller" horizontalScrollPolicy="off">
        <s:DataGroup
            id                      = "lstComments"
            width                   = "100%"
            height                  = "100%"
            clipAndEnableScrolling  = "true"
            itemRenderer            = "myCustomRenderer">    

            <s:layout>
                <s:VerticalLayout
                    id                  = "vLayout" 
                    useVirtualLayout    = "true"
                    gap                 = "2" 
                    variableRowHeight   = "true" 
                    horizontalAlign     = "left" 
                    verticalAlign       = "top"
                    paddingTop          = "0" 
                    paddingBottom       = "0" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>

    private function onArrayChange(event:CollectionEvent):void
    {
        switch(event.kind) {
            case CollectionEventKind.ADD:
            {
                callLater(scrollDown);
                break;
            }
        }
    }


    private function scrollDown():void
    {
        scroller.verticalScrollBar.value = scroller.viewport.contentHeight - scroller.viewport.height;
        scroller.invalidateProperties();
    }

Finally, I found a hack. The problem was caused by the scroller.viewport.contentHeight. It was not calculated correctly, when the method scrollDown was called.

So, to solve this problem, after I created the scroller I registered to the FlexEvent.UPDATE_COMPLETE event.

And the method which handles this event:

private function onUpdateCompleteScroller(event:Event):void
{
 //compute the new value for the scroller
 var newValue:Number = scroller.viewport.contentHeight - scroller.viewport.height;
 if (scroller.verticalScrollBar.value != newValue && newValue > 0)
 {  
  scroller.verticalScrollBar.value = scroller.viewport.contentHeight - scroller.viewport.height;
  scroller.invalidateProperties();
 }
}

If someone else finds a better solution, I will accept his answer.