Flex Examples
The following example demonstrates a very simple Flex application which listens for the mouseWheel event (represented here by the MouseEvent.MOUSE_WHEEL constant) and updates a Label control on the display list.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/28/detecting-the-mouse-scroll-wheel-in-a-flex-application/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()"> <mx:Script> <![CDATA[ private function init():void { systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel); } private function doMouseWheel(evt:MouseEvent):void { num += evt.delta; } ]]> </mx:Script> <mx:Number id="num">0</mx:Number> <mx:NumberFormatter id="numberFormatter" /> <mx:ApplicationControlBar dock="true"> <mx:Label text="Click the stage and scroll mouse wheel to begin." /> </mx:ApplicationControlBar> <mx:Label text="{numberFormatter.format(num)}" fontSize="96" /> </mx:Application>
View source is enabled in the following example.
Oops, I had to remove the SWF since it was competing with IE’s scroll (I’m using a weird <iframe /> solution for inline samples). To see the sample, click here.
And no, the number has absolutely no significance. It is just a quick way to see if the mouse wheel was responding.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
For me, this works in FireFox, but not in IE7 or Opera (all on Windows XP)
I tried this code in Firefox Safari on OS X and it didn’t work. The number in the middle didn’t change despite clicks scrolls. I added an “Alert.show(“Scrolled”);” line after num = evt;, but that Alert didn’t pop up either.
Any tips to get this to work?
[Separately, I tried just clicking the sample application on this page -- that didn't work for me either.]
Turns out this is a known issue in OS X: http://hasseg.org/blog/?p=3
hello, is there any way to detect middle-mouse click?
Hello! Great work! Would be great to have a middle-mouse click as well! thanks
4 Blanka, Tony Fendall:
Guys, try to click before scrolling. It is related with mouse focus.
It works for me.
Regards
Hi nice post!
i have a question:
I have a big canvas, with a vertical scrollbar. inside the canvas is a timeline, which zooms in and out if the user scrolls the mouse wheel. but it works only if i dont have the scrollbar.
Is there a way to stop flex scrollbars from listening to mouse_wheel events. (cause i want to zoom not to scroll with the wheel) thanks
nvm i solved the problem by:
- disabling scrollbars for the canvas with verticalScrollPolicy=”off”
- adding a custom VScrollBar to its parent and have them interact with actionscript.
Not the most elegant solution, but lets me fine tune lost of stuff.
You can only set 2 properties of an automatically set scrollbar, thats not much..
Hi,
I am using the Datagrid in my canvas.
currently in my datagrid using mouse wheel scrolling is not going perfectly, it is scrolling more than 5 rows per scroll.
So now I want to reduce the delta value of mousewheel so that i can scroll 1 row of datagrid in per scroll. So please give me some idea around it. I am not getting how to apply those events to Datagrid.
I converted and worked on a class for mouse wheel support on mac. It can easily be made to work with other browsers if needed. http://www.judahfrangipane.com/blog/?p=237
@Nikhil: I had a similar problem (to scroll one up or down, independent of the mouse setup).
The solution was quite simple for me: You could check if “event.delta” is >0 or
Works fine on a PC, but not on a Mac. On the Mac I tried it with Safari, Firefox and Chrome and in all three it does nothing. Click the app, move the mouse wheel, and the number stays at zero.
Reading another one of the comments here, I tried this example: http://www.judahfrangipane.com/blog/?p=237 and it had problems on the Mac too.
Does anybody have a Flex solution that works with the mouse wheel across platforms?
is there a way to define the actual delta ? At the moment my Mouse creates a -/+3 value
Doesn’t work with Firefox 3.6 on Mac.
Yup. doesn’t work on 3.6 firefox… why?
Didn’t work for me on a Windows 7 PC under IE 8 or FF 3.6
Neil
Hello Neil, daniel,
i am able to run same code in Windows 7 PC under IE6, Firefox 4
Doesn’t work on 32 bit Windows Server 2008 in Firefox 7.0.1 with Flash Player 10.3.183.5 (debug). And yes I clicked the stage. Works in IE 9 though.