scroll specific child into view - flex4

Question

I have following code, which make scroll to specific child. It works fine except when scroll to the last child. It works OK but it's not my expect behavior.The PROBLEM is when scroll to last child, I want the child to show on the top of viewport just like other ones. Some diagrams should help this a little better than words ever could.
Summary the issue:
1.when scroll to last child, is it possible to position it at (0,0) in the viewport?
2.I have 6 children, each one has 200 height. The contentHeight is 1200. when the verticalScrollPosition is 0, I invoke the viewport.getVerticalScrollPositionDelta(NavigationUnit.END), the returned value
is 900. So how the 900 is calculated?
following is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()"
>
<fx:Script>
<![CDATA[
import components.MockUI;
import mx.collections.ArrayList;
import spark.core.NavigationUnit;
private function init():void {
createElements();
}
private function createElements():void {
for (var i:int = 0; i<6; i++) {
var ui:MockUI = new MockUI();
ui.text = "I'm " + i + " !";
ui.width = 300;
ui.height = 200;
viewport.addElement(ui);
}
}
//scroll to diffrent child, take attetion to the scrollRect
private function scrollToChild(index:int):void {
var delta:Number = returnSumHeight(index);
viewport.verticalScrollPosition = delta;
var scrollRect:Rectangle = viewport.scrollRect;
trace("viewport contentHeight: ", viewport.contentHeight);
trace("vp: ", viewport.verticalScrollPosition);
trace("scrollRect: ", scrollRect);
}
private function handleScroll(unit:uint):void {
trace("unit: ", unit);
var delta:Number = viewport.getVerticalScrollPositionDelta(unit);
trace("delta:", delta);
}
private function minus():void {
viewport.verticalScrollPosition -= 10;
trace("vp: ", viewport.verticalScrollPosition);
}
//return the sum height of children before index item
private function returnSumHeight(index:int):Number {
var sumHeight:Number = 0;
for(var i:int=0; i<index; i++) {
sumHeight += viewport.getElementAt(i).height;
}
return sumHeight;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="100"/>
</s:layout>
<s:HGroup>
<s:Label text="Select Child: "/>
<s:ComboBox id="comboBox"
dataProvider="{new ArrayList([0,1,2,3,4,5])}"
selectedIndex="0"
change="scrollToChild(comboBox.selectedIndex)"/>
</s:HGroup>
<s:Scroller>
<s:VGroup id="viewport" width="350" height="300" gap="0">
</s:VGroup>
</s:Scroller>
<s:Button label="MINUS" click="minus()"/>
<s:Button label="UP" click="handleScroll(NavigationUnit.UP)"/>
<s:Button label="DOWN" click="handleScroll(NavigationUnit.DOWN)"/>
<s:Button label="HOME" click="handleScroll(NavigationUnit.HOME)"/>
<s:Button label="END" click="handleScroll(NavigationUnit.END)"/>
</s:Application>
MOCKUI:
package components {
public class MockUI extends UIComponent {
private var label:Label;
private var _text:String;
private var textChanged:Boolean = false;
public function set text(value:String):void {
if(value == _text) {
return;
}
_text = value;
textChanged = true;
invalidateProperties();
}
public function get text():String {
return _text;
}
override protected function createChildren():void {
super.createChildren();
label = new Label();
addChild(label);
}
override protected function commitProperties():void {
super.commitProperties();
if(textChanged) {
textChanged = false;
label.text = _text;
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
label.width = unscaledWidth/2.0;
label.height = unscaledHeight/2.0;
label.x = unscaledWidth/2.0;
label.y = unscaledHeight/2.0;
graphics.clear();
graphics.lineStyle(2, 0xffff00);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.beginFill(0xff0000, 1);
graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}

Answer 1

When scrolling to last child, is it possible to position it at (0,0) in the viewport?
No, it's not possible with the default code in the Flex SDK and due to the size of your viewport/elements. The only way to make that happen with the default code is to make your viewport the same size as one item (and all items have the same height).
The Scroller won't allow you to scroll past the end of the content (except as an effect in mobile apps). You could extend the Scroller class to allow this.
I have 6 children, each one has 200 height. The contentHeight is 1200. when the verticalScrollPosition is 0, I invoke the viewport.getVerticalScrollPositionDelta(NavigationUnit.END), the returned value is 900. So how the 900 is calculated?
The height of each child is 200, but the height of the container they are in is 300 pixels. Because the scroller won't allow you to scroll past the end of the content, it restricts the max value of scroll position to: contentHeight - viewportHeight (1200 - 300 = 900).
Think of the viewport as something that moves (in this case) vertically over the content. The content is 1200 pixels tall, but since the viewport is 300 pixels, we never need to set the viewport's Y position above 900 pixels to see the end of the content.