javascript - raton - scroll en js

Evento de rueda del ratón en navegadores modernos.

Question

Me gustaría tener un JavaScript limpio y agradable para el evento de la rueda del mouse, compatible con la última versión de los navegadores comunes sin código heredado para versiones obsoletas, sin ningún marco JS.

El evento de Mousewheel se explica muy bien here . ¿Cómo simplificarlo para las últimas versiones actuales de los navegadores?

No tengo acceso a todos los navegadores para probarlo, por lo que caniuse.com es una gran ayuda para mí. Por desgracia, la rueda del ratón no se menciona allí.

Basado en el comentario de Derek, escribí esta solución. ¿Es válido para todos los navegadores?

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
// custom code
});

Answer 1

Aquí hay un artículo que describe esto, y da un ejemplo:

http://www.sitepoint.com/html5-javascript-mouse-wheel/

Código relevante, menos el ejemplo específico dado al redimensionar una imagen:

var myitem = document.getElementById("myItem");
if (myitem.addEventListener)
{
// IE9, Chrome, Safari, Opera
myitem.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
myitem.attachEvent("onmousewheel", MouseWheelHandler);
}
function MouseWheelHandler(e)
{
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
return false;
}

Answer 2

Esto es mucho más limpio en 2018:

window.addEventListener("wheel", event => console.info(event.wheelDelta));

Los navegadores pueden devolver valores diferentes para el delta (por ejemplo, Chrome devuelve +120 (desplazarse hacia arriba) o -120 (desplazarse hacia abajo). Un buen truco para normalizarlo es extraer su signo, convirtiéndolo efectivamente en +1 / -1 :

window.addEventListener("wheel", event => {
const delta = Math.sign(event.wheelDelta);
console.info(delta);
});

Referencia: MDN .