Detección de la rueda del ratón en el eje x(izquierda y derecha) con Javascript

scroll internet-explorer-9

Question

Sé que es posible detectar arriba y abajo, por ejemplo,

 function handle(delta) {
if (delta < 0) {
alert(''down'');
} else {
alert(''up'');
}
}
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener(''DOMMouseScroll'', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;​

Pero, ¿hay alguna forma de detectar si el mouse de un usuario se fue hacia la izquierda o hacia la derecha con la rueda del mouse?

Answer 1

Compruebe la respuesta aceptada para más enlaces e información.

Burbujeante evento de rueda / mousewheel

event.detail especifica el número de "tics" que movió la rueda del mouse.

Los valores positivos significan abajo / derecha ", negativo arriba / izquierda.

event.axis especifica el eje del gesto de desplazamiento (horizontal o vertical). Este atributo fue agregado en Firefox 3.5

Chrome implementa el mismo comportamiento que IE AFAIK. En IE y Chrome: use e.wheelDeltaX y e.wheelDeltaY

Answer 2

Creo que puedes encontrar los datos ''horizontales'' o del eje x desde

event.originalEvent.wheelDeltaX

Debería depurar el código y ver qué propiedades tiene el objeto de evento en tiempo de ejecución. Esto debería confirmar o negar si esa propiedad existe. A partir de ahí, es solo una cuestión de detectar si el valor difiere.

Answer 3

IE es compatible con todos ellos: mousewheel | onmousewheel, que son los controladores de eventos , así como WheelEvent (proporciona DeltaX , DeltaY , DeltaZ ), que es la interfaz estándar de Event y MouseWheelEvent , que también se admite en IE9 + (con WheelDelta y el número de otras propiedades relacionadas con las coordenadas x , y ).

Probado en IE11.

Relacionado: Hoy, cuando el estándar de eventos táctiles finalmente se formaliza, resultó que IE11 ya era compatible con la mayoría de ellos: http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx .

Aparte: @bob_cobb, es posible que desee volver a visitar su respuesta aprobada en favor de la más votada y con los detalles más ricos . Esto es para ayudar a los futuros visitantes a encontrar la información correcta y para mostrarle que incluso cuida a la comunidad.

Answer 4

Internet Explorer : en IE9 e IE10 tiene que usar el evento onwheel (no la rueda onmousewheel, ni DOMMouseScroll) usando addEventListener para poder detectar el desplazamiento horizontal de la rueda desde el DOM. Use el valor event.deltaX junto con el valor event.deltaMode para detectar el event.deltaMode horizontal del mouse (para el event.deltaY vertical use el valor event.deltaY ). Para <= IE8 use el evento onmousewheel y el event.wheelDelta (solo se admite el giro del mouse yaxis para versiones anteriores de IE).

Blink / Webkit : Soporte desde Chrome 31 / Safari 7 para el evento onwheel. De lo contrario, use el evento event.wheelDeltaX y event.wheelDeltaY propiedades event.wheelDeltaX y event.wheelDeltaY . El único truco de Chrome / Safari: utilizar la tecla MAYÚS mientras se desplaza el cursor hacia la izquierda / derecha (útil para la prueba).

Firefox : Firefox 17 y versiones posteriores son compatibles con el evento onwheel . Para admitir versiones anteriores de Firefox (de vuelta a 3.6) use las propiedades DOMMouseScroll y event.axis y event.detail en desuso para admitir el desplazamiento horizontal. (Firefox mobile: los documentos implican que el evento onwheel se activará cuando se mueva con un dispositivo táctil. No lo he probado). Firefox también tiene un evento MozMousePixelScroll . La documentación de MDN también proporciona el código sugerido para manejar los diferentes eventos en los navegadores. Firefox también tiene una configuración mousewheel.enable_pixel_scrolling que puede afectar a todos los diferentes eventos de la rueda.

Pruebe el evento onwheel utilizando el comprobador de eventos de rueda de QuirksMode. Pude ver que esto funciona con IE9 en Win7 e IE10 en Windows 8 (versión preliminar, versión IE 10.0.8400.0). Para configurar el nuevo evento onwheel estándar:

• Seleccione addEventListener (captura) de radio.
• Desmarque el desplazamiento.
• Desmarque la rueda del ratón.
• Deja la rueda marcada.
• Marque mostrar propiedades del evento en la parte inferior de la columna derecha.
• Use F12 y confirme que el documento está en los estándares de IE9 de documentMode o los estándares de IE10.
• Haga un poco de desplazamiento del mouse en la columna central y vea cómo los eventos de la rueda se registran en la columna izquierda y los detalles del evento de la rueda se muestran en la parte inferior de la columna derecha.
• A veces es posible que tenga que desmarcar y volver a hacer clic en la casilla de verificación del evento de la rueda para obtener los eventos (no estoy seguro de por qué: ¿quizás un error en la página de modo de página o en IE?)

La especificación W3C , la documentación de Microsoft IE9 para el evento MouseWheel y los documentos MDN especifican para el evento onwheel :

• deltaX : obtiene la distancia que una rueda del mouse ha girado alrededor del eje x (horizontal).
• deltaY : obtiene la distancia que una rueda del mouse ha girado alrededor del eje y (vertical).
• deltaZ : obtiene la distancia que una rueda del mouse ha girado alrededor del eje z.
• deltaMode : obtiene un valor que indica la unidad de medida para los valores delta:
  • DOM_DELTA_PIXEL (0x00) Predeterminado. El delta se mide en píxeles.
  • DOM_DELTA_LINE (0x01) El delta se mide en líneas de texto.
  • DOM_DELTA_PAGE (0x02) El delta se mide en páginas de texto.

Editar: asegúrese de NO event.ctrlKey el evento por defecto () si está configurada event.ctrlKey ; de lo contrario, probablemente evitará el zoom de la página. También aparentemente, la tecla ctrlKey se establece en verdadero si utiliza el zoom de pellizco en un panel táctil en Chrome e IE.

La detección de características es difícil en IE:

• En IE10 con IE8 documentMode, ''onwheel'' in document devuelve true pero parece que no se activan eventos para eventos onwheel horizontales o verticales.
• En IE9 ''onwheel'' in document devuelve falso, pero el evento onwheel funciona (supongo que document.documentMode === 9 debe verificar antes de usar el evento onwheel en IE9).
• En IE9 y IE10, document.onwheel = ''somefunc(event)'' tradicional no funciona incluso en documentMode 9 o 10 (es decir, parece que solo puedes usar addEventListener).

Para realizar la prueba, use un mouse Microsoft Tiltwheel, un touchpad con desplazamiento (gesto o zona) o un dispositivo Apple (mouse mágico o bola de desplazamiento del mouse poderoso). Juegue con varias configuraciones de mouse o touchpad en Windows (o preferencias de mouse en OSX si está probando el desplazamiento horizontal en OSX con Safari).

Los signos de los valores delta tienen el signo opuesto para onwheel y onmouseweel para todos los navegadores. En IE, los valores delta son diferentes para onwheel y onmousewheel, por ejemplo (usando mi máquina dev con IE9 con un mouse de Microsoft muy estándar):

• event.deltaY fue 111 en Win8 o 72 en Win7 para el evento onwheel desplazándose hacia abajo una muesca. El valor cambia ligeramente con el zoom, pero hay otro factor involucrado también que no puedo resolver (no parece ser el tamaño de la fuente).

• event.wheelDelta fue -120 para el evento onmousewheel desplazándose hacia abajo una muesca.

• Para Windows XP "Tenemos que agregar soporte para el mensaje WM_MOUSEHWHEEL para hacer que funcione [, el soporte] se agregó en Vista, por lo que si está utilizando XP, necesita que instale IntelliType Pro y / o IntelliPoint", según este artículo .

• Varios controladores comunes de touchpad y mouse utilizan la rueda del mouse para los navegadores, por ejemplo, la detección de un navegador roto o el uso de los mensajes WM_HSCROLL y WM_VSCROLL en lugar de los mensajes WM_MOUSEWHEEL y WM_MOUSEHWHEEL. Por lo tanto, los controladores no generarán eventos de rueda en el navegador (independientemente de qué navegador haya usado o qué versión de Windows haya usado). Una búsqueda de Bugzilla para WM_VSCROLL muestra problemas que podrían afectar a cualquier navegador (no solo a Firefox).

Answer 5

• El evento DOMMouseWheel en Firefox tiene una propiedad de axis .

• El evento mousewheel en Chrome tiene wheelDeltaX y wheelDeltaY .

• Lamentablemente, no puedo encontrar ninguna propiedad equivalente para eventos de IE (pruebas en IE9).