Detecting the mouse scroll wheel in a Flex application

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.

18 thoughts on “Detecting the mouse scroll wheel in a Flex application

  1. 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.]

  2. 4 Blanka, Tony Fendall:
    Guys, try to click before scrolling. It is related with mouse focus.
    It works for me.
    Regards

  3. 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

  4. 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..

  5. 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.

  6. @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

  7. 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?

  8. 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.

Comments are closed.