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.

18 thoughts on “Setting the horizontal scroll position in the HorizontalList control in Flex

  1. Again, I love this site.. so great that you post this kind of simple yet undergrated thins.

  2. Awesome site and great post. Helped me greatly. Anyone have an idea on how to apply effects as you transition between list items?

  3. Hello, Thanks for the great info on your site.

    Question on this example: Is this something that is easily set to use the tween class to slide from image to image, instead of just jumping?

  4. Great example, it really helped me extend my gallery. Is there a way to add effects to transition between items on a HorizontalList?

  5. A very cool example! Is it possible to have the sliding effect within the horizontal list instead of using the slider and buttons?

    Thanks=)

  6. Hi,
    maybe this is the wrong topic to place my post but I couldn’t find anything similar to my prob.
    I’m just starting with Flex Builder 3 and after reading a couple of books, I’m trying to build my own RIA. Everything was wonderful and I was happy with the results until I got stuck with a Canvas problem. I got a canvas(A) within another canvas(B) which B can be scaled using a Slider. It worked fine but the thing is, to center the scale of B relative to A it making me mad. I’ve been searching the net for a week and I couldn’t find anything to help me figure it out. My code works but when I try to slide from 200% to 10%, to position from B gets all mess up.
    My code: A = _wrap / B = _doc
    /* ———————– */
    private function alignDoc():void {

    if(_doc.width > _wrap.width){
    _doc.x = 30;
    _wrap.horizontalScrollBar.setStyle(“thumbWidth”, 100);
    _wrap.horizontalScrollPosition = _wrap.horizontalScrollBar.width / 2;
    }
    if(_doc.height > _wrap.height){
    _doc.y = 30;
    _wrap.verticalScrollPosition = _wrap.verticalScrollBar.height / 2;
    }

    if(_doc.width

  7. Hi Peter,

    Thanks a lot for sharing this..
    But I need to add the events for the Itemrenderer.
    For example, when I click any Item in the HorizontalList, I have to display the “Name of the particular picture”.
    Please tell me .. How to do this ???

  8. Peter.. One more thing need to know…

    Could you please post any example for Event Dispatch from Itemrenderer ???

    Where the Itemrenderer for any List based control… Please…

  9. Hi,

    I am trying this code with Flex 3, but it is giving error on using the

    “Error: Component declaration are not allowed here”. Can you please help me with this??

    Thanks

  10. You just saved my life with this post! Thank you so much!!

    Add a tween if you like:

    var pos:int =hList.horizontalScrollPosition-1;
    var min:int = 0;
    var value:int = Math.max(min, pos);

    TweenLite.to(hList, 0.5,{horizontalScrollPosition:value});

Comments are closed.