Scrolling 2 lists with 1 scroller Flex 4

Question

Been trying to scroll 2 lists with their native scrollers disabled with 1 scroller added to the right of them.

I tried setting the viewport of each List as the scroller and while that works it just instantiates the scroller to each of the Lists rather than use 1.

Essentially i'm trying to have them scroll vertically at the same time while dragging only 1 scrollbar thumb.

Answer 1

I thought this was an interesting question and did a little investigation. Here is what I came up with.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           initialize="application1_initializeHandler(event)"
           creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
    <![CDATA[
        import flashx.textLayout.container.ScrollPolicy;

        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;
        [Bindable] private var dp:ArrayCollection = new ArrayCollection();
        protected function application1_initializeHandler(event:FlexEvent):void
        {
            //Add some dummy content
            for (var i:int=0; i<20; i++){
                dp.addItem("Test Item " + i);
            }
            //Turn off vertical scrolling for the two lists
            list1.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.OFF);
            list2.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.OFF);
        }


        protected function vScroll_changeHandler(event:Event):void
        {
            //Set the maximum of the one scroll bar to equal the maximum value of the hidden scroll bar
            vScroll.maximum = list1.scroller.verticalScrollBar.maximum;
            //Set the scroll position of the two hidden scroll bars to the value of the visible bar
            list1.scroller.verticalScrollBar.value = vScroll.value;
            list2.scroller.verticalScrollBar.value = vScroll.value;
        }


        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            //Initialize the maximum value to the value of the hidden scroll bar after data has been loaded
            vScroll.maximum = list1.scroller.verticalScrollBar.maximum;
        }

    ]]>
</fx:Script>

<s:HGroup>
    <s:List id="list1" dataProvider="{dp}" height="200"/>

    <s:List id="list2" dataProvider="{dp}" height="200"/>
    <s:VScrollBar id="vScroll" height="200" change="vScroll_changeHandler(event)"/>
</s:HGroup>

</s:Application>