Flex3: Scroll jumps too fast and can't figure out why

Question

I'm using a TileList in Flex 3 to display a list of products, 3 per row. The problem is that the third row doesn't fit into the panel and when I scroll down it jumps 3 rows, so the third row that was half visible is not seen, is there anyway to adjust the scroll speed? i have searched for other questions related and i found one valid answer, but i don't think it was the same problem.

This is the question: Flex List Scroll Speed With Mouse Wheel

Anyway this is the code of my tile list:

<mx:Panel id="homePage" width="75%" title="{resourceManager.getString('general','menubar_mostsold')}">
<mx:TileList id="list" dataProvider="{arrPro}"    itemRenderer="compIdea.view.Thumb" width="100%" height="100%"itemClick="product_selected(event)"/> 
</mx:Panel>

I have tried adjusting the "verticalLineScrollSize" attribute of the panel as the TileList is not a container and does not have that property. Do i really have to extends the class List and override the mouseWheelHandler method?

Thanks before hand.

Answer 1

Thanks to some help from @GiaGandi i have solved to scroll problem, first add an eventListener to your list like so

list.addEventListener(MouseEvent.MOUSE_WHEEL, scrollHandler, true);

And create a function using a MouseEvent, what @GiaGandi said is correct, except for multiplying by -20, that just makes is scroll twenty times faster, what i did was use the MouseEvent's Delta to figuer out if i was scrolling up or down, and then just add or subtract the list's verticalScrollPosition by 1. The list's verticalScrollPosition is the inset of the actuall line, so adding 1 to it makes it go down one line.

And then i got a diferent problem, when the list reached its begging or end it wouldn't stop scrolling and an error occured, so simply just control if the verticalscrollposition is above 0 if going up or higher that the number of rows in your list, in a normal one row per object it would be the lenght of your dataProvider, but because my TileList has 3 objects per row, i divide it between 3 and then subtract two so two rows are left at the bottom when it stops scrolling

public function scrollHandler(event:MouseEvent):void{
             if(event.delta < 0){
                 if(list.verticalScrollPosition < (arrPro.length / 3 - 2)){
                     list.verticalScrollPosition += 1;
                }
             }else{
                 if(list.verticalScrollPosition > 0){
                     list.verticalScrollPosition -= 1;
                 }
             }
            event.stopPropagation();
        }

Hope this can help someone in the future, i didn't find any other solution in SO. Special thanks to @GiaGandi for helping!

G

Answer 2

I had this problem, and that link didn't help me, either.

Try this

list.verticalScrollPosition+=(event.delta*-20);//you can experiment`                
event.stopPropagation();`