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?
<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();
}