Flex List Scroll Speed With Mouse Wheel

Question

I have a custom class that extends List which I am using as a container. However, the scroll speed is too fast on the mouse wheel, as in it scrolls loads even if you only move the wheel a tiny bit. I tried adding an event listener to my list for MouseEvent.MOUSE_WHEEL and setting the value of event.delta but this has had no effect. Does anyone know how I can make it slower?

My custom class is nothing special, I just created it so I could have a different itemRenders for different item types. It looks like:

public class MultipleRenderersList extends List
{
    override public function createItemRenderer(data:Object):IListItemRenderer
    {
        if (data is IRenderable)
        {
             return data.getDiaryRenderer();
        }
        else if (data is Array) 
        {
             if (data.length > 0)
             {
                  if (data[0] is IRenderable)
                  {
                       return data[0].getDiaryRenderer(data);
                  }
             }
        }
        return null;
    }
} 

Answer 1

The List class has a mouseWheelHandler function that you can override. Just override the function, update the delta property of the mouseevent, and call super. This example will quarter the delta, reducing the speed substantially:

package
{
  import flash.events.Event;
  import flash.events.MouseEvent;

  import mx.controls.Alert;
  import mx.controls.List;

  public class MyList extends List
  {

    override protected function mouseWheelHandler(event:MouseEvent):void {
      event.delta = event.delta/4;
      super.mouseWheelHandler(event);
    }

  }
}

However, in many cases the scroll speed / delta will be driven off of a system preference, so doing this may cause unexpected behavior for some users. The reason that adding the handler and updating the delta failed to work is that by that point mouseWheelHandler had already been called.

Answer 2

Actually, what HandOfCode said isn't relevant here. Because he made the same mistake as i did, which is to think that a List component or TileList component are containers. They aren't. So, they don't have verticalLineScrollSize property.

Sean solution is the only one that worked for my case. I would add that event.delta may have a positive or negative value depending of the direction of the wheel action. So you better do something like this if you plan to scroll, for example one line at a time :

    override protected function mouseWheelHandler(event:MouseEvent):void
    {
        event.delta = (event.delta > 0) ? 1:-1;
        super.mouseWheelHandler(event);
    }

Answer 3

A very simple way to modify this is to change the verticalLineScrollSize property. This is a property of all containers and it defaults to 5. (for flex 3)