scrolling interval in a Spark List with Tilelayout oversized while using mouse wheel after scrolling with mouseclick

Question

I have a spark List with an item renderer and a tile layout.
If I scroll by clicking with the mouse on the scroll bar and trying to scroll with the mouse wheel after that, there is a problem:

The interval of the scrolling is oversized, instead of scrolling one item down (or up) the List scrolls 4 items down (or up).

<s:List
    dataProvider="{myDataProvider}"
    itemRenderer="MyRenderer"
    left="11" right="11"
    bottom="3" top="10"
    useVirtualLayout="false"
    >
        <s:layout>
            <s:TileLayout
                columnAlign="justifyUsingWidth"
                rowAlign="justifyUsingGap"
                orientation="rows"
                rowHeight="180"
                columnWidth="220"
                clipAndEnableScrolling="true"
                />
        </s:layout>
    </s:List>

rowHeight = 180 and columnWidth = 220 are the dimension of my renderer.

Any hints what's wrong or how I could solve this problem?

Update: This is a small example:

The main application:

<?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"
               creationComplete="init(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] public var items:ArrayCollection;

            protected function init(event:FlexEvent):void{
                items = new ArrayCollection();
                for(var i:int = 0; i<200; i++){
                    var obj:Object = new Object();
                    obj.name = "Item "+i;
                    items.addItem(obj);
                }
            }

                    protected function list1_mouseWheelHandler(event:MouseEvent):void{
                trace("delta ="+event.delta);
            }
        ]]>
    </fx:Script>
    <s:Group width="50%"
             height="50%">
        <s:List
            dataProvider="{items}"
            left="5" right="5"
            top="5" bottom="5"
            itemRenderer="MyRenderer"
            allowMultipleSelection="false"
            useVirtualLayout="false"
            mouseWheel="list1_mouseWheelHandler(event)"
            >
            <s:layout>
                <s:TileLayout
                    columnAlign="justifyUsingWidth"
                    rowAlign="justifyUsingGap"
                    orientation="rows"
                    rowHeight="180"
                    columnWidth="220"
                    clipAndEnableScrolling="true"
                    />
            </s:layout>
        </s:List>
    </s:Group>

And the renderer:

<?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" 
                xmlns:spareparts="de.rotex.spareparts.*"
                width="220" height="180">

    <s:BorderContainer borderColor="#FFF9DE" >      
        <s:Label horizontalCenter="0" verticalCenter="0"
                 text="{data.name}" />
    </s:BorderContainer>
</s:ItemRenderer>

If you now try to scroll you will notice that (with one scroll) you would see Item 6 and 7 at the top (setting the line-scroll property in windows to 3, which is alright then). But If you now click on the scroll bar and scroll again (from the top) you will see that Item 12 and 13 are at the top. Not Item 6 and 7 as before...

Freiman

Is this consistent across multiple OSes / Browsers? Can you provide a full runnable sample w/ data that demonstrates the problem? – Passionate

I've provided an example (see the question). The problem doesn't exist in the IE but in Firefox. I don't have the possibility to test it on another OS than Windows XP. – Freiman

I could not reproduce this in FF, but the place where the scrolling is done is VScrollBar->mouseWheelHandler, so you probably need to check there. – Respondence

Answer 1

You can control the amount scrolled by the mousewheel by subclassing VScrollBar and overriding the mouseWheelHandler method. A post in this forum thread has example code attached: http://forums.adobe.com/message/2783736

Tights