Smooth scrolling a Spark List with variable height items using the mouse wheel

Question

We have a list of variable height items that we display in a Spark List control. When the user clicks and drags the vertical scrollbar the list scrolls smoothly. When the up/down arrows are used it moves in small and discrete steps. When the mouse wheel is used the list scrolls in very large discrete steps that is problematic for the user.

We would like to enable smooth scrolling for the mouse wheel. The height of our items vary significantly and it is easy to get lost when you scroll with the moouse due to the discrete scrolling.

Our implementation is fairly simple:

<s:List id="chartList" 
        dataProvider="{pm.charts}"
        itemRenderer="charts.ChartItemRenderer"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="on"
        useVirtualLayout="false"
        cachePolicy="auto">
</s:List>

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="false" 
                xmlns:charts="charts.*"
                >
    <fx:Script>
        <![CDATA[
            private var _canvas:BitmapData;

            public function set canvas(value:BitmapData):void
            {
                _canvas = value;
            }

            [Bindable]
            public function get canvas():BitmapData
            {
                return _canvas;
            }

            public function render(x:int,y:int, data:int):void
            {
                _canvas.draw(this);
            }
        ]]>
    </fx:Script>
        <charts:DefaultChartContainer 
            chart="{data}" 
            cachePolicy="on"/>
</s:ItemRenderer>

There does not appear to be an out of the box method for implementing smooth scrolling in a Spark List. How would one go about implementing smooth scrolling in a spark list for variable height items?

Answer 1

Like @Sunil_D. suggested, listening the mousewheel event and manually adjusting the HorizontalScrollPosition is an easy way to handle this. Add the EventListener for your component

chartList.addEventListener(MouseEvent.MOUSE_WHEEL, chartList_mouseWheelHandler);

and increase/decrease the horizontalScrollPosition with, for example, multiples of event.delta

protected function chartList_mouseWheelHandler(event:MouseEvent):void
{           
    chartList.verticalScrollPosition -= (event.delta * SOME_CORRECT_VALUE);
} 

Finding the proper SOME_CORRECT_VALUE might need some experimenting, but it shouldn't be to hard to find.

Answer 2

Edit:

Here is another way to do this: http://forums.adobe.com/message/3844410#3844410

Ok, so this wont be easy, but it is doable.

1) Create a custom skin for your list

2) In the custom skin, replace the scroller with a custom scroller (MyScroller)

3) Create a new class that extends Scroller, called MyScroller

4) Adobe in their infinite wisdom made skin_mouseWheelHandler private - which they seem to do all over the place, so you would have to override something higher up, maybe attachSkin and detachSkin. Or you could try adding your own skin_mouseWheelHandler with a higher priority in attachSkin and prevent default on it so the default does not get called.

5) Replicate the code in skin_mouseWheelHandler, and modify it to suit your requirements.