View Full Version : Firefox mouse wheel event

01-06-2006, 08:55 AM
Hi, if you take a look at Microsoft's http://www.virtualearth.com you'll notice that the Javascript code they wrote there can detect when and to which direction was the mouse wheel moved by the user... in Firefox.

I thought this feature was only doable in Internet Explorer 6, but looks like Microsoft found a way of doing this on Firefox.

From what I have researched, this is the code for detecting the mouse wheel event on Firefox and Mozilla:

window.addEventListener('DOMMouseScroll', function_name, false);

However, how do you know if the mouse wheel was moved up or down? I'm trying to do this in a scrollbar-less IFRAME, so detecting to which direction was the page scrolled is not an applicable solution.

Any insights? :)



01-06-2006, 04:34 PM
window.addEventListener('DOMMouseScroll', function_name, false);

However, how do you know if the mouse wheel was moved up or down?The detail property of the event argument indicates the direction and magnitude of the scroll (though I always get values of ±3). A positive value indicates the user scrolled down (rotated towards), which is opposite to Microsoft's wheelDelta property (which yields a value of ±120, here).

I'm trying to do this in a scrollbar-less IFRAME [...]If you are trying to scroll the frame, leave the scrollbars alone. This solution will not work on all browsers (and none, obviously, when scripting is disabled) so you'll be sacrificing support for (presumably) some gimmicky effect.


01-06-2006, 07:07 PM
Hi Mike, thanks for your help, much appreciated :)

Say, how do you get that 3 value when the DOMMouseScroll event gets triggered?

By using event.details, or how? I searched "event.detail" on google but got no results.

Also, in regard to the iframe, I'm actually building an API similar to the Google Maps one, so I'm looking for a way to allow the user to zoom the map out or in on both IE and FF by using the mouse wheel.



06-13-2006, 02:30 PM
".detail" work for getting the direction :

window.addEventListener('DOMMouseScroll', scroll, false);
function scroll(e){
// -->


06-13-2006, 06:58 PM
Hey guyz you should take a look at : http://en.wikipedia.org/wiki/DOM_Events#XUL_events

06-13-2006, 07:45 PM
This function may give some clues though:

// Copyright (c) Microsoft Corporation. All rights reserved.
function r(s, t, u) {
var strMozillaType = t.slice(2);
if (strMozillaType == "mousewheel")strMozillaType = "DOMMouseScroll";
if (strMozillaType != "mouseenter" && strMozillaType != "mouseleave")s.addEventListener(strMozillaType, q, true);
else {
s.addEventListener("mouseover", q, true);
s.addEventListener("mouseout", q, true);
s.addEventListener("mouseover", z, false);
s.addEventListener("mouseout", A, false);
s.addEventListener(strMozillaType, u, false);

07-17-2006, 05:47 PM

I've been playing around with this for sometime now and I've not yet been able to make it work to my needs using FF.
What I found out is that FF already has some kind of mousewheel scroll mechanism that then conflicts with other algorithms I have in place.

The situation is one that I would like to use the mousewheel to scroll through a div layer. The usual scheme, two divs, one inside the other, the outer one sets the visibility area and the inner one has the content to be scrolled.

If I click nothing inside that content div the mouse wheel scroll works ok both in IE and FF. After I click any link inside the content div in FF the amount of scroll is doubled, I mean, the scroll code I made works and another scroll I don't know of also works independently. If I disable my code FF still scrolls the content div after that click!
The main problem is that I have other mechanisms for scrolling by clicking arrows and dragging the scrollbar and the code just looses track of positions changed by this FF weird scroll capability!

Using IE everything works out smooth and only my own code moves things around.

Any of you have found anything like this? Can this FF scroll be disabled? Or maybe track some event that signals when is has been used?

Thank you ...

07-17-2006, 06:29 PM
digitalg: We'd be more interested on testing if you could post your code.:)

07-18-2006, 03:12 PM
Ok, I'll show in place what I mean, but let me explains things a little better.

The scrolling mechanism is made by two DIV tags on inside the other as I told previously. The outer one, that I call visibilityLayer, sets the visibility area. The inner one has the content to be scrolled and I call it contentLayer.

I've been banging my head over this and understood a little more of what is happening:
1 - FF's own scroll comes into place only when some kind of object, like an anchor, inside the div tag has focus.
2 - the amount of FF's own scroll is only the length of the div content that overflows the window or frame, not the length of what overflows the visibility layer
3 - When that kind of object inside the div has focus FF's own scroll happens ONLY inside the div tag and not in the entire window! Further more, this scroll does not change the top property of the div tag being scrolled!

This item 3 is the one that puzzles me and completly escapes my understanding. And if the .top property is not set even trapping the DOMMousescroll event I could not know the amount of scroll that took place and could not get it to play along with my own scroll code!

I've now in place a workaround, for every anchor the link calls a js function that handles the request and then sets the focus to some other object out of the div tag. I'm now using another anchor, but if you people can suggest me some other thing that can receive the focus it would be nice :)

And for the example:

The site is http://bugs.digitalg.net
Make sure you're in the english version and click 'What's new'. It will open a popup.

The first letter ('s') of the first link ('spider') calls a function goWrong() that leaves the focus on the link. Click it and use the mousewheel to scroll down. It will scroll way down over the limit of the text (and it should not).

Scroll back up using the mousewheel (or close and open the popup again).
Click anyother link and scroll down using the mousewheel. The scroll will stop in the right place.

You can use the view source to see the HTML code and the .js is in /inc/nav_text.js
There's a lot more code here, but the directly relevant, and the only thing I added to make use of the mousewheel is this initiation:

window.addEventListener("DOMMouseScroll", scrollWheelMove, false);

and this function:

function scrollWheelMove (e) {
if (window.event || window.Event) {
if (!e) e = window.event;
if (e.wheelDelta <= 0 || e.detail > 0 ) dnFast()
else upFast()

that uses some previous working functions

The 'problem' can also be seen by dragselecting the all text inside the content div

I'd prefer tu use clean code and not this kind of tricks, so I'll keep looking into this.
I'm using FF 1.0.6

thank you again

07-18-2006, 06:39 PM
Hey, is it your browser that's going mad or my browser that's getting some problems with it?? It works just fine with firefox 1.0.7(windows as I don't have a scrollwheel in my mouse in linux computer). I works fine with me but dunno what the problem.

07-18-2006, 06:44 PM
what seems to be the problem? :p
m not seeing it :D m using FF WinXP :D

07-26-2006, 04:35 PM
I've now tested it with FF 1.0.6, 1.0.7 and NN 7.2
I have the same problem with all these 3 browsers!

Maybe I didn't explain the situation good enough :(
The goWrong() link is still there but now a little down (there's new content).
I meant the scroll tests to be made always in the popup window, not the main window below (that changes when clicking the popup).
I also meant to say the content to be scrolled is just inside the content div tag. In this popup window it's almost everything but the top title and pic and the scroll bars to the right.
Maybe the easiest way to see the problem is dragselect all the content of the div tag. Click the content, hold the mouse button down and scroll past the end of the popup to select everything. Then use only the arrow pics in the scroll bar to scroll down and up and you see you'll much further down than it would be needed and can't go all the way up.

I still couldn't test it with FF 1.5

07-27-2006, 08:07 PM
hey digitalg, see this: http://www.dynamicdrive.com/forums/showthread.php?t=11438

10-13-2011, 07:32 PM
I created an account just to post my solution for cross browser onmousewheel support, since most other websites offering this solution seemed kinda 'iffy'. I am surprised the browser companies haven't corrected this incompatibility yet, i guess this must be a case of company stubbornness (that's right MICROSOFT, it's contagious).

Anyway enough tech blasphemy- here is my solution which i've tested in Opera, Chrome, FireFox, Safari, and Internet Explorer (all the latest versions as of Oct. 2011)

var e=e==null?event:e;
document.onmousewheel!==null?window.addEventListener('DOMMouseScroll', msWhl, false):document.onmousewheel=function(e){var e=e==null?event:e;msWhl(e.wheelDelta);};
function msWhl(e){

this code will fire an alert containing the value of 'event.wheelDelta' for chrome, safari, ie, opera, OR an alert containing the value of 'event.detail' for FF (which are related to the mouse wheel scrolling event)

a quick note- for [ Opera, Chrome, Internet Explorer, and Safari ] when you scroll up, the event will return a POSITIVE value (120 on my machine), and when you scroll down the event returns a NEGATIVE value (-120)

BUT on FireFox when you scroll up it will return a NEGATIVE value (-6 on my machine) and scrolling down will return a POSITIVE value

I am assuming that whatever task you are trying to perform which requires monitoring the onmousewheel event will also require knowing if the value is negative or positive, I would have included a fix for the FireFox inconsistency but I haven't come to that bridge yet myself (im sure it won't be too difficult to implement your own fix). Anyway, good luck javascripting y'all, take care and hope this helped.

10-13-2011, 07:56 PM
I think code like that (with a correction for some browsers reversing the pos/neg values and using different number values) is in use for some DD scripts. Certainly for others around the web. And I'm not too sure you cannot find good code for it using Google.

Doing this onload is unwise - potential conflicts with other antiquated scripts. Use addEventListener/attachEvent instead.

var e=e==null?event:e;

can safely and more efficiently be replaced with:

e = e || event;

e was already declared local to the function as a parameter, so should not be declared again as a variable. The e or event syntax is essentially the same as e=e==null?event:e but takes less time for the script parser. BTW, e will almost never equal null, but the == comparison isn't type specific so it will also return true for undefined, which is the more likely value in IE less than 9.