Mouse wheel handler in Javascript

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 (1 votes, average: 5.00 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.

6 Responses

  1. baluvadivel says:
    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.

    Reply
  2. Thomas says:
    October 9, 2007 at 5:25 am

    not bad … not bad… :D

    Reply
  3. Chris says:
    January 7, 2008 at 7:32 pm

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

    Reply
  4. giallo says:
    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…

    Reply
  5. Chris Knox says:
    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.

    Reply
  6. Гносис says:
    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

    Reply

Leave a Reply