Detecting the mouse scroll wheel in a Flex application

by Peter deHaan on August 28, 2007

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.

Tagged as: delta, mouseWheel

{ 14 comments… read them below or add one }

Tony Fendall August 28, 2007 at 6:08 pm: For me, this works in FireFox, but not in IE7 or Opera (all on Windows XP)

Reply
Blanka September 16, 2007 at 5:58 am: 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.]

Reply
Blanka September 16, 2007 at 4:02 pm: Turns out this is a known issue in OS X: http://hasseg.org/blog/?p=3

Reply
Dusan April 9, 2008 at 7:52 am: hello, is there any way to detect middle-mouse click?

Reply
gcardinal April 16, 2008 at 12:43 am: Hello! Great work! Would be great to have a middle-mouse click as well! thanks

Reply
walv November 29, 2008 at 12:20 pm: 4 Blanka, Tony Fendall:
Guys, try to click before scrolling. It is related with mouse focus.
It works for me.
Regards

Reply
sydd January 9, 2009 at 4:44 am: 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

Reply
sydd January 10, 2009 at 8:14 am: 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..

Reply
Nikhil January 27, 2009 at 10:45 pm: 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.

Reply
judah February 15, 2009 at 8:39 pm: 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

Reply
florian heft April 11, 2009 at 2:51 am: @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

Reply
mitch January 31, 2010 at 5:16 am: 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?

Reply
jr March 5, 2010 at 4:09 am: is there a way to define the actual delta ? At the moment my Mouse creates a -/+3 value

Reply
Tom March 27, 2010 at 8:41 am: Doesn’t work with Firefox 3.6 on Mac.

Reply