Setting the horizontal scroll position in the HorizontalList control in Flex

The following example shows how you can scroll the Flex HorizontalList control by setting the horizontalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function prev():void {
                var pos:int = hList.horizontalScrollPosition-1;
                var min:int = 0;
                var value:int = Math.max(min, pos);
                hList.horizontalScrollPosition = value;
            }

            private function next():void {
                var pos:int = hList.horizontalScrollPosition+1;
                var max:int = hList.maxHorizontalScrollPosition;
                var value:int = Math.min(pos, max);
                hList.horizontalScrollPosition = value;
            }

            private function slider_change(evt:SliderEvent):void {
                hList.horizontalScrollPosition = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object lbl="Illustrator" src="ai_appicon-tn.gif" />
        <mx:Object lbl="Adobe AIR" src="air_appicon-tn.gif" />
        <mx:Object lbl="ColdFusion" src="cf_appicon-tn.gif" />
        <mx:Object lbl="Dreamweaver" src="dw_appicon-tn.gif" />
        <mx:Object lbl="Flash" src="fl_appicon-tn.gif" />
        <mx:Object lbl="Flash Player" src="fl_player_appicon-tn.gif" />
        <mx:Object lbl="Fireworks" src="fw_appicon-tn.gif" />
        <mx:Object lbl="Flex" src="fx_appicon-tn.gif" />
        <mx:Object lbl="Lightroom" src="lr_appicon-tn.gif" />
        <mx:Object lbl="Photoshop" src="ps_appicon-tn.gif" />
    </mx:Array>

    <mx:Panel styleName="opaquePanel">
        <mx:HorizontalList id="hList"
                dataProvider="{arr}"
                itemRenderer="HorizontalListItemRenderer"
                verticalScrollPolicy="off"
                horizontalScrollPolicy="off"
                columnWidth="100"
                columnCount="4"
                rowHeight="100"
                rowCount="1"
                borderSkin="{null}" />
        <mx:ControlBar>
            <mx:Button label="Previous" click="prev();" />
            <mx:HSlider id="slider"
                    minimum="0"
                    maximum="{hList.maxHorizontalScrollPosition}"
                    value="{hList.horizontalScrollPosition}"
                    liveDragging="true"
                    snapInterval="1"
                    tickInterval="1"
                    showDataTip="false"
                    width="100%"
                    change="slider_change(event);" />
            <mx:Button label="Next" click="next();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View HorizontalListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain">

    <mx:Image source="{data.src}"
            horizontalCenter="0"
            verticalCenter="0" />
    <mx:Label text="{data.lbl}"
            fontWeight="bold"
            horizontalCenter="0"
            bottom="0" />

</mx:Canvas>

View source is enabled in the following example.

Tagged as: horizontalScrollPosition, max(), maxHorizontalScrollPosition, min()