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

Question

Sé que es posible detectar hacia arriba y hacia abajo, p.

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 una manera de detectar si el mouse de un usuario se movió hacia la izquierda o hacia la derecha con la rueda del mouse?

Answer 1

• El evento DOMMouseWheel en Firefox tiene una propiedad axis.

• El evento mousewheel en Chrome tiene wheelDeltaX y wheelDeltaY.

• Lamentablemente, no encuentro ninguna propiedad equivalente para eventos de IE (prueba en IE9).

Answer 2

Creo que se puede encontrar los datos 'horizontal' o eje x de

event.originalEvent.wheelDeltaX 

Usted debe depurar el código, y ver qué propiedades del objeto de evento tiene en tiempo de ejecución. Esto debería confirmar o negar si esa propiedad existe. A partir de ahí, solo se trata de detectar si el valor es diferente.

Answer 3

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

Bubbling scroll/mousewheel event

event.detail especifica el número de "tics" que la rueda del ratón se movía.

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

event.axis especifica el eje del gesto de desplazamiento (horizontal o vertical). Este atributo se añadió en Firefox 3.5

Chrome implementa el mismo comportamiento que yo sepa IE En IE y Chrome:. utilizan e.wheelDeltaX y e.wheelDeltaY

Answer 4

Internet Explorer: En IE9 y IE10 usted tiene que utilizar el onwheel evento (no el onMouseWheel, ni DOMMouseScroll) usando addEventListener sean capaces de detectar la rueda de desplazamiento horizontal desde el DOM. Utilice el valor event.deltaX junto con el valor event.deltaMode para detectar el desplazamiento horizontal del mouse (para el desplazamiento vertical utilice el valor event.deltaY). Para < = IE8, utilice el evento onmousewheel y el event.wheelDelta (solo rodamientos de mouse yaxis admitidos para versiones anteriores de IE).

Blink/Webkit: Soporte desde Chrome 31/Safari 7 para el evento onwheel. De lo contrario, utilice el evento onmousewheel y las propiedades event.wheelDeltaX y event.wheelDeltaY. Solo truco de Chrome/Safari: usando la tecla SHIFT mientras el mouse se desplaza hacia la izquierda/derecha (útil para probar).

Firefox: Firefox 17 y superior support the onwheel event. Para admitir versiones anteriores de Firefox (de vuelta a la versión 3.6), use las propiedades DOMMouseScroll ahora en desuso y las propiedades event.axis y event.detail para admitir el desplazamiento horizontal. (Firefox móvil: los documentos implican que el evento onwheel se activará cuando se realice una panorámica con un dispositivo táctil. No lo he probado). Firefox también tiene un evento MozMousePixelScroll. La documentación de MDN también brinda un 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 eventos de rueda diferentes.

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

• Seleccione addEventListener (capture) radio.
• Desactivar desplazamiento.
• Desactive la rueda del mouse.
• Deje la rueda marcada.
• Marque las propiedades del evento en la parte inferior de la columna derecha.
• Utilice F12 y confirme que el documento se encuentra en documentMode IE9 Standards o IE10 Standards.
• Haga rodar el mouse sobre la columna central y vea los eventos de la rueda que se registran en la columna izquierda, y los detalles del evento de la rueda se muestran en la parte inferior de la columna de la derecha.
• A veces puede que tenga que untick y retick la casilla de verificación evento rueda para obtener los eventos (no estoy seguro por qué: quizá error en la página quirksmode o en IE?)

El W3C specification, la Microsoft IE9 documentation for the MouseWheel event y la MDN docs especificar para el onwheel evento:

• deltaX - Obtiene la distancia que una rueda del ratón ha girado alrededor del eje x (horizontal).
• deltaY - Obtiene la distancia que una rueda de mouse ha girado alrededor del eje y (vertical).
• deltaZ - Obtiene la distancia que una rueda de mouse ha girado alrededor del eje z.
• deltaMode - Obtiene un valor que indica la unidad de medida de 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 las páginas de texto.

Editar: asegúrese de que NO preventDefault() si el evento se establece event.ctrlKey, de lo contrario es probable que evitar zoom de página. También aparentemente el ctrlKey se establece en verdadero si usa el zoom de pellizco en un touchpad en Chrome e IE.

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

• En IE10 con IE8 documentMode, 'onwheel' in document rendimientos cierto, pero parece que no hay eventos se activan para el evento onwheel horizontal o vertical.
• En IE9 'onwheel' in document devuelve falso pero el evento onwheel funciona (supongo que document.documentMode === 9 debe comprobarse antes de utilizar el evento onwheel en IE9).
• En IE9 e IE10 tradicional document.onwheel = 'somefunc(event)' no parece funcionar incluso en documentMode 9 o 10 (es decir, parece que solo puede usar addEventListener).

Para probar, use un mouse de rueda inclinable de Microsoft, un panel táctil de desplazamiento (gesto o zona) o un dispositivo Apple (mouse mágico o mouseball poderoso). Juega con varios ajustes del mouse o el panel táctil en Windows (o las preferencias del mouse en OSX si pruebas el desplazamiento horizontal en OSX con Safari).

Los signos de los valores delta tienen el signo opuesto para onwheel y onmousewheel 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 ratón de Microsoft muy estándar):

• event.deltaY era 111 en Windows 8 o 72 en Win7 para onwheel caso el desplazamiento hacia abajo uno muesca. El valor cambia ligeramente con el zoom, pero también hay otro factor involucrado que no puedo resolver (no parece ser el tamaño de fuente).

• event.wheelDelta fue -120 para onmousewheel evento de desplazamiento hacia abajo una muesca.

• Para Windows XP "hay que añadir soporte para el mensaje WM_MOUSEHWHEEL para hacer que el trabajo [apoyo] se añadió en Vista por lo que si usted está usando XP necesita IntelliType Pro y/o IntelliPoint instalado" - como por this article .

• Varios controladores comunes de mouse y touchpad reventan el soporte de la rueda del mouse para los navegadores, p. detección de navegadores rotos, o utilizando los mensajes WM_HSCROLL y WM_VSCROLL en lugar de los mensajes WM_MOUSEWHEEL y WM_MOUSEHWHEEL. Entonces, los controladores no generarán eventos de rueda en el navegador (sin importar qué navegador usaste, o qué versión de Windows usaste). Un search of Bugzilla for WM_VSCROLL muestra problemas que podrían afectar a cualquier navegador (no solo a Firefox).

Answer 5

IE apoya todos ellos: mousewheel | onmousewheel que son el event handlers así como WheelEvent (ofrece DeltaX, DeltaY, DeltaZ) que es el standard Event y MouseWheelEvent interface, que es also supported en IE9 + (con WheelDelta y el número de otro x, y coordina propiedades relacionadas).

Probado en IE11.

Relacionado: Hoy cuando el estándar de eventos táctiles finalmente se formaliza, resultó que IE11 ya soportaba la mayor parte: 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 a favor del most voted with most richer details one. ¡Esto para ayudar a futuros visitantes a encontrar la información correcta y mostrar que incluso cuidas de la comunidad!