Scrolling with the mouse wheel on an application containing a spark List

I have an Application displaying a spark.List. Every item of my list must be visible (no vertical scroll).

I nee开发者_如何学运维d my Application to be scrollable in a web browser, so I've add a Scroller containing all my components. When the browser window is too small to contain all my application, scrollBar appears.

My application looks like that :

<?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" width="100%"  height="100%" >

     <fx:Declarations>
     </fx:Declarations>

    <s:Scroller id="myScroller" width="100%" height="100%">
      <s:VGroup >
        <s:Label text="toto1"/>
        <s:List>
            <s:dataProvider>
                <s:ArrayCollection>
                    <fx:String>item1</fx:String>
                    <fx:String>item2</fx:String>
                    <fx:String>item3</fx:String>
                    <fx:String>item4</fx:String>
                    <fx:String>item5</fx:String>
                </s:ArrayCollection>
            </s:dataProvider>
        </s:List>
        <s:Label text="toto2"/>
    </s:VGroup>
</s:Scroller>
</s:Application>

My problem is with the mouse wheel event.

• When I scroll with my mouse cursor outside of the List, everything works fine.

• When I scroll with my mouse cursor over the List, nothing happens.

It looks like the mousewheel event is stopped by the List, even if the List does not have a scrollbar.

Does anyone know how to fix this problem ?

I've noticed that the scroller is guilty of trapping mousewheel events, even if it is not visible/active.

1. The best option would be to have Adobe fix this problem in the SDK
2. The next best option would be to modify the scroller class to not capture mousewheel events
3. The quick and dirty fix for a list where "Every item of my list must be visible (no vertical scroll)." is to do a quick re-skin. The default ListSkin.mxml class is a bit large to paste here, so this is the bit you need to change (note: i've removed the comments):

.

<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" hasFocusableChildren="false">
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
             <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>

Just copy and paste the whole class into a new skin and get rid of (delete) that Scoller. You should be good to go if you now apply this skin to the list in it's definition or CSS.

*You will also need to remove 4 references to the scroller that I can see on lines 42,45,89,95. The scroller SkinPart is not required by the List class.

I looked at the SDK code closely and I think this is a bug. Somewhere, there's a snippet of code that isn't checking to see if the scrollbar is showing and doing 'preventDefault()' on the event, stopping it from bubbling to the parent scoller.

You should probably file a bug on bugs.adobe.com/flex.

I found a acceptable workaround here: flexache

The english is terrible, but I just added an ID on my scroller mainScroller and the vgroup inside of it mainVGroup, and added an event handler on the mousewheel of the scroller:

            mainScroller.addEventListener(MouseEvent.MOUSE_WHEEL,
               function scroller1_mouseWheelHandler(event:MouseEvent):void{
                   //calculate the new position 
                   mainVGroup.verticalScrollPosition+=(event.delta*-20);            
                   //stop the event’s bubbling
                   event.stopPropagation();
               }
           ,true);

It's not perfect (still a little stuttering) but it suited my purpose.