Flex Examples

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.