28
Aug
07

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.

Full code after the jump.

View MXML

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


11 Responses to “Detecting the mouse scroll wheel in a Flex application”


  1. 1 Tony Fendall Aug 28th, 2007 at 6:08 pm

    For me, this works in FireFox, but not in IE7 or Opera (all on Windows XP)

  2. 2 Blanka Sep 16th, 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.]

  3. 3 Blanka Sep 16th, 2007 at 4:02 pm

    Turns out this is a known issue in OS X: http://hasseg.org/blog/?p=3

  4. 4 Dusan Apr 9th, 2008 at 7:52 am

    hello, is there any way to detect middle-mouse click?

  5. 5 gcardinal Apr 16th, 2008 at 12:43 am

    Hello! Great work! Would be great to have a middle-mouse click as well! thanks

  6. 6 walv Nov 29th, 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

  7. 7 sydd Jan 9th, 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

  8. 8 sydd Jan 10th, 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..

  9. 9 Nikhil Jan 27th, 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.

  10. 10 judah Feb 15th, 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

  11. 11 florian heft Apr 11th, 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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed