Creating a scroll-to list in Flex

Kalen Gibbons — Mon, 01 Jun 2009 20:31:25 +0000

Here is an example of how you can create a scroll-to list using the AnimateProperty class. In this example I’m using a repeater instead of a List for simplicity, but for large data sets this would not be recommended.

I have a DataGrid on the left hand side that simply lists the release date and title of several upcoming movie releases. If you click on a row, the list on the right will scroll to the details for the movie selected.

– View application source –

The code is pretty straightforward, but there two main pieces to look at. The first is how to use the AnimateProperty class to scroll the list to the desired location. The second, is how to allow the last item in the list to scroll all the way to the top.

Scrolling to an item in the list

import mx.effects.easing.Sine;
import mx.effects.AnimateProperty;
import mx.events.ListEvent;

private var scrollAnimation:AnimateProperty = new AnimateProperty();

private function scrollToMovie(event:ListEvent):y{

var yPosition:int = movieWrapper.getChildAt(event.rowIndex).y;
scrollAnimation.stop();
scrollAnimation.property = "verticalScrollPosition";
scrollAnimation.easingFunction = Sine.easeOut;
scrollAnimation.duration = 900;
scrollAnimation.toValue = yPosition;
scrollAnimation.play([movieWrapper]);

}

Allowing the last list item to scroll to the top

private function addSpaceToBottom():void{

if(movieWrapper.numChildren > 2){

var lastChild:HBox = movieWrapper.getChildAt(movieWrapper.numChildren-2) as HBox;
var spacerHeight:int = movieWrapper.height – lastChild.height;
if(spacerHeight > 0)

spacerBottom.height = spacerHeight;

}

Kalen Gibbons » verticalScrollPosition

Creating a scroll-to list in Flex

Scrolling to an item in the list

Allowing the last list item to scroll to the top