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:

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;
}