Scrolling to a specific index in a Flex List control

The following example shows how you can scroll to a specific item index in Flex by using the scrollToIndex() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""
            import mx.collections.ArrayCollection;
            private var arrColl:ArrayCollection;
            private function init():void {
                var arr:Array = [];
                var n:uint = 50;
                var i:uint;
                for (i = 0; i < n; i++) {
                    arr.push({label:"item " + i, data:i});
                arrColl = new ArrayCollection(arr);
                list.dataProvider = arrColl;
                numericStepper.maximum = arrColl.length - 1;
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="scrollToIndex(n):">
                <mx:NumericStepper id="numericStepper"
                        change="list.scrollToIndex(event.value);" />
    <mx:List id="list"
            width="100" />


View source is enabled in the following example.

10 thoughts on “Scrolling to a specific index in a Flex List control

  1. Is there anyway to make it so the list kinda “iPhone” like scrolls to the selected index? I have no idea how to do this, but it would be cool :)

    1. @Marcin,

      In Flex 4/Spark, the API is called ensureIndexIsVisible(). Apparently I haven’t done an entry on that yet, but here’s an example:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx=""
                  protected function slider_changeHandler(evt:Event):void {
                  protected function list_labelFunc(item:Object):String {
                      return item.index + ") " + item.label;
          <s:HSlider id="slider" 
                  minimum="0" maximum="{list.dataProvider.length-1}"
                  change="slider_changeHandler(event)" />
          <s:List id="list"
                  horizontalCenter="0" verticalCenter="0">
                  <s:VerticalLayout gap="0"
                          requestedRowCount="5" />
                      <fx:Object label="One"       index="0" />
                      <fx:Object label="Two"       index="1" />
                      <fx:Object label="Three"     index="2" />
                      <fx:Object label="Four"      index="3" />
                      <fx:Object label="Five"      index="4" />
                      <fx:Object label="Six"       index="5" />
                      <fx:Object label="Seven"     index="6" />
                      <fx:Object label="Eight"     index="7" />
                      <fx:Object label="Nine"      index="8" />
                      <fx:Object label="Ten"       index="9" />
                      <fx:Object label="Eleven"    index="10" />
                      <fx:Object label="Twelve"    index="11" />
                      <fx:Object label="Thirteen"  index="12" />
                      <fx:Object label="Fourteen"  index="13" />
                      <fx:Object label="Fifteen"   index="14" />
                      <fx:Object label="Sixteen"   index="15" />
                      <fx:Object label="Seventeen" index="16" />
                      <fx:Object label="Eighteen"  index="17" />
                      <fx:Object label="Ninteen"   index="18" />
                      <fx:Object label="Twenty"    index="19" />


  2. thanks useful infomation :-)
    addtion, how to know selected nodes of hierachical xml?

    i want to scrolling automatically by program.

    i know how to dynamically scrolling use scrollToIndex method.. but can not find a value for it

    please any help..

  3. Hi,

    My list control uses a custom item renderer. I am switching views between a data grid and a list view both containing the same data.
    I need to show the selected item in both views when I switch.
    I have tried scrollToIndex() with even a hard coded value, but the list view just refuses to scroll. Is this because of the custom item renderer component? I am defining my list view as follows:

    <mx:List x="0" y="3" id="listView" width="100%" height="100%"
    		alternatingItemColors="[#DAF4F6, #FFFFFF]" themeColor="#2119C4"></mx:List>

    Please help…

Comments are closed.