javascript - rueda - Evento mousewheel y dommousescroll en IE y Edge
scroll mouse css (2)
Tengo este código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.addEventListener(''DOMMouseScroll'', mouseWheelEvent);
window.addEventListener(''mousewheel'', mouseWheelEvent);
function mouseWheelEvent() {
alert(1);
}
</script>
</body>
</html>
Funciona en Chrome y Firefox. Sin embargo, no funciona con la pantalla táctil de mi laptop dell xps 13 9434 en IE & edge. Pero funciona con (algunos) touchpads de otros portátiles. ¿Qué hacer? jQuery no es un problema.
"¿Qué no funciona?" => No hay alerta en desplazamiento cuando se usan 2 dedos como los que usa para desplazarse por los navegadores.
Algunas versiones anteriores de IE no son compatibles con addEventListener, sino que son compatibles con attachEvent.
Pruebe un crossBrowser addEventListener:
if ( window.attachEvent ) {
window.attachEvent(''on''+eventType, yourHandler); // in your case "scroll"
} else {
window.addEventListener ...
}
Preste atención a la altura de la página: no funcionará si no hay compensación. Si no hay desplazamiento en su página, entonces use esto:
document.attachEvent(''onmousewheel'', mouseWheelEvent); // the event is attached to document
Editar
Después de algunas investigaciones, parece que el problema es en realidad de Microsoft.
Hay un problema abierto al respecto en el rastreador de problemas EdgeHTML desde hace casi un año.
Básicamente, dice que los eventos de rueda no funcionan en Edge (y versiones anteriores de IE) cuando se usan Precision Touchpads .
Por cierto, no borro el resto de la respuesta, ya que sigue siendo relevante. Deberías usar la wheel lugar de todos modos.
Deberías escuchar la wheel :
window.addEventListener(''wheel'', mouseWheelEvent);
Ha reemplazado tanto mousewheel como DOMMouseScroll que ahora están en desuso y es compatible con todos los navegadores .
Ejemplo de navegador cruzado:
window.addEventListener(''wheel'', mouseWheelEvent);
function mouseWheelEvent() {
console.log("Fired");
}
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>
<h1>
Hodor!
</h1>