Programa utilizando el scroll del raton con Javascript

Las aplicaciones web son cada vez más parecidas a las aplicaciones que solemos instalar en nuestro sistema operativo. Por supuesto las aplicaciones convencionales que tenemos en nuestro escritorio son más funcionales y poseen un interfaz más potente.

Sin embargo ya es posible implementar efectos como drag&drop ,autocompletar o zoom con la ayuda de Ajax.

Pero no vamos a escribir sobre Ajax. Vamos a hablar sobre el scroll del ratón, hoy en día es dificil encontrar un ratón sin scroll y la mayoría de los usuarios estan acostumbrados a su uso.
Este es el código para implementar el uso del scroll de ratón con Javascript.

/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
if (delta < 0)
…;
else
…;
}

/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
/** In Opera 9, delta differs in sign as compared to IE.
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
}

/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

Este código te permitira saber el estado del scroll del ratón y la dirección del movimiento, cogiendo los valores positivos y negativos del delta del scroll, en caso positivo significará que la direccion es hacia arriba y en caso negativo hacia abajo.

Demo de uso de scroll con Javscript

Los valores que devuelva la función variarán depemdiendo de la sensibilidad del ratón.

Esta es la primera versión del código y puedes encontrar más información en esta página es compatible con IE6 y Firefox 1.5

Enlaces Relacionados

• Proyecto de SIMILE, Timeplot
• Listado de provincias y municipios de España
• Nuevo proyecto de SIMILE, Timeplot
• Llamar funciones en Javascript
• Cosas que no puedes hacer con Javascript
• Las funciones Javascript más útiles
• Los 7 pecados mortales de Ajax
• Fácil menu contextual con Prototype
• Los lenguajes de programación más populares
• Las 10 mejores librerías