Here I would like to describe a solution for the common need to use mouse wheel in DHTML programs. It is based on Sam Stephenson’s Prototype JavaScript framework.

First you have to start listening for the scroll mouse wheel event and unfortunately it is different for the different browsers.

Event.observe(document, "mousewheel", onScrollWheel);//Interner Explorer
Event.observe(window, "DOMMouseScroll", onScrollWheel);//FireFox
Event.observe(window, "mousewheel", onScrollWheel);//Safari and Opera

Once the event has been fired, we have to determine the direction of the scroll. It can be determined by the control variables (event.wheelDelta and event.wheelDelta) inside the event object but they have different meaning in different browsers. And this is a simple schema of what they are:

  FireFox Safari Internet Explorer Opera
Scroll: UP DOWN UP DOWN UP DOWN UP DOWN
event.wheelDelta undefined undefined 120 -120 120 -120 -120 120
event.detail -3 3 0 0 undefined undefined -3 3

Based on that we can come up with the following solution:

function onScrollWheel()
{
	var wheelDelta = (e.wheelDelta)?e.wheelDelta*((!!window.opera)?-1:1) : e.detail*-1;
	if (wheelDelta < 0)
	{ 
		goUp();
	}
	else
	{ 
		goDown();
	}
	// optionally you can stop propagation of the event
	Event.stop(e); 
	return false;
}

Share this post:   digg     Stumble Upon     del.icio.us     E-mail

Please post your comments:

Name:  
Email (optional): Your email address will not be posted.
Comments: HTML will be ignored, URLs will be converted to hyperlinks  
Enter the text you see in the box: