Tuesday, July 25th, 2006
JavaScript and Mouse Wheels
Category: JavaScript
Adomas Paltanavicius has written about handling mouse wheel events in JavaScript.
JAVASCRIPT:
-
-
/** This is high-level function; REPLACE IT WITH YOUR CODE.
-
* It must react to delta being more/less than zero.
-
*/
-
function handle(delta) {
-
if (delta <0)
-
/* something. */;
-
else
-
/* something. */;
-
}
-
-
function wheel(event){
-
var delta = 0;
-
if (!event) event = window.event;
-
if (event.wheelDelta) {
-
delta = event.wheelDelta/120;
-
if (window.opera) delta = -delta;
-
} else if (event.detail) {
-
delta = -event.detail/3;
-
}
-
if (delta)
-
handle(delta);
-
}
-
-
/* Initialization code. */
-
if (window.addEventListener)
-
window.addEventListener('DOMMouseScroll', wheel, false);
-
window.onmousewheel = document.onmousewheel = wheel;
-
Of course, the real question is when would you want to actually use this. We are trained to know that the mouse wheel scrolls the page up and down in the browser (or whatever you have it set to).
We need a good reason to intercept the events and do something else.
4.2 rating from 36 votes
You can use the mousewheel to change a number written in an input field.
With scrolling up, the number increases, with scrolling down, the number decreases. This function is often used in real applications..
The mousewheel on Google Maps was a very useful greasemonkey/firefox extension for scrolling in/out.
would be funny to simply reverse the page-scrolling-behaviour.
mousewheel up…scrolls down
mousewheel down…scrolls up
eat joke…eh?
I had to attach the DOMScroll event handler for an implementation of scrollable tables with dynamic data last year. IMO, obviously, intercepting events has its place. Use it sparingly, if ever.
I think Google Maps use of this (now baked in, no greasemonkey needed) is a nice use of the wheel, though a bit surprising at first.
You can use it for Stop motion animation. I like this idea.
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html
With viewport scroll implementations (datagrids, etc.) I can see this being useful for sure.
I use it in a popup calendar to scroll through the months. It’s much faster than clicking arrows and I wish other sites would use it.
[...] Ajaxian has a post about this as well and asks why you would want to do this: Of course, the real question is when would you want to actually use this. We are trained to know that the mouse wheel scrolls the page up and down in the browser (or whatever you have it set to). [...]
There are two places I would use this in sites I’ve already worked on.
1. Site: http://www.electronicmiracles.com/
Sections of the site are loaded using AHAH into DIVs with auto overflow. The problem at the moment is that when you scroll wheel, the content scrolls, then when it reaches the bottom, the site itself scrolls down. Very annoying, and could be fixed with this (probably).
2. Flash site …
Sometimes you want to use Flash and extend it to it goes bigger than a page. You can capture events in Flash OR/AND the page itself and run the same functions for scrolling either the page or the Flash.
[...] Una librerÃa en JavaScript para controlar eventos de la rueda del mouse, aunque realmente no se para que pueda ser útil. [...]
i’m working on an horizontal-scrolling blog, so this is helpful when you notice that your browser doesn’t scroll left or right.
of course… the first birthday of this post is coming soon hehe
This would be great if you are doing an auto complete app. The user can SCROLL through the list of suggestions.
Visit this site and you’ll know what I mean
http://www.google.com/webhp?complete=1&hl=en
this doesn’t work for me on Opera 9.2 on windows, though it does on the Linux builds, and on all other browsers I tested. Also, on Safari for windows, the scroll delta is 2x what it should be.