Tag Archives: mousewheel.js

Mouse wheel handler in Javascript

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

Test :

1: up

Meanwhile, check the original script.

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

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