Mouse wheel handler in Javascript

July 29, 2006 • Javascript by Emanuele Feronato • 6 Comments

I found this very very interesting script by Adomas Paltanavičius to determine if you are using mousewheel.

It returns a delta value, +1 or -1, according to scroll direction.

Scroll mouse wheel to see delta here.

I am publishing it here, and very soon I will start to use it to code games, form handlers, and so on.

Meanwhile, check the original script.

It needs some improvements due to some strange delta values on some browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
<head>
<script type="text/javascript">
function handle(delta) {
	var s = delta + ": ";
	if (delta < 0)
		s += "down";
	else
		s += "up";
	document.getElementById('delta').innerHTML = s;
}
 
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;
 
</script>
</head>
<body>
<div id="delta">Scroll mouse wheel to see delta here.</div>
</body>
</html>

Do you have an idea about how to use mouse wheel handling? Let me know, and I will (try to) code it.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3.67 out of 5)
Loading ... Loading ...
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 6 comments

  1. baluvadivel

    on August 10, 2006 at 8:36 am

    Realy very nice. Thank you so much. is it possible to track the speed of click or scroll? I think possible.

  2. Thomas

    on October 9, 2007 at 5:25 am

    not bad … not bad… :D

  3. Chris

    on January 7, 2008 at 7:32 pm

    I believe this is the (somewhat) same code used in games made for ipods.

  4. giallo

    on March 3, 2008 at 4:05 pm

    [italian, right?]

    bello bello, c’è modo per caso di creare un javascript o qualcosa del genere che mi cambi la direzione di spostamento di una pagina web, in modo che usando la wheel la pagina vada a destra e a sinistra invece che su e giù?
    Sto costruendo un sito in “horizontal way” e mi servirebbe proprio…

  5. Chris Knox

    on April 7, 2008 at 3:21 pm

    Hi.

    Any idea how to get a mouse scroll wheel to make a page move left/right rather than up/down. I know you can do this by pressing extra buttons but I would like to program this straight into my code if possible.

    Thanks.

  6. Гносис

    on February 20, 2009 at 10:29 am

    I would like to see the list of: Objects that supports mousewheel event, becouse i’m trying with div, but i have some problems.

    thanks

< >