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