Tuesday, July 25th, 2006

JavaScript and Mouse Wheels

Category: JavaScript

Adomas Paltanavicius has written about handling mouse wheel events in 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; [/javascript] 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.

Posted by Dion Almaer at 9:15 am
14 Comments

++++-
4.1 rating from 48 votes

14 Comments »

Comments feed TrackBack URI

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

Comment by Pablo — July 25, 2006

The mousewheel on Google Maps was a very useful greasemonkey/firefox extension for scrolling in/out.

Comment by Dr Nic — July 25, 2006

would be funny to simply reverse the page-scrolling-behaviour.
mousewheel up…scrolls down
mousewheel down…scrolls up

eat joke…eh?

Comment by theKasper — July 25, 2006

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.

Comment by Sreedhar C — July 25, 2006

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.

Comment by Rob Sanheim — July 25, 2006

You can use it for Stop motion animation. I like this idea.
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html

Comment by caol_ila — July 25, 2006

With viewport scroll implementations (datagrids, etc.) I can see this being useful for sure.

Comment by Lindsey Simon — July 25, 2006

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.

Comment by JackSJr — July 25, 2006

[…] 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). […]

Pingback by Web 2.0 Blog » Blog Archive » JavaScript and the Mouse Wheel — July 26, 2006

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.

Comment by Tarwin — July 27, 2006

[…] Una librería en JavaScript para controlar eventos de la rueda del mouse, aunque realmente no se para que pueda ser útil. […]

Pingback by Recursos de fin de semana (III) — July 29, 2006

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

Comment by fauno — June 5, 2007

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

Comment by Srini — July 14, 2007

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.

Comment by brainmaps — August 11, 2007

Leave a comment

You must be logged in to post a comment.