2012-06-26 17 views
7

En Safari en OS X, con un panel táctil mágico o un panel táctil macbook, deslizando hacia la derecha o izquierda con dos dedos para adelante y para atrás, respectivamente. ¿Hay alguna manera de detectar esto, a diferencia de hacer clic atrás/adelante, o presionar comando + flecha, etc.?Detectar el deslizamiento de dos dedos de Safari en el escritorio

La razón es que el deslizamiento tiene su propia animación de barrido estilo revelación, y con transiciones ajax personalizadas en un sitio, se ve realmente extraño cuando se obtiene una siguiendo a la otra. Esto ocurre cuando navegas por código en github, por ejemplo.

Actualización 23/6/16: Github volvió a simplemente cambiar el contenido de la página sin transición, lo que fue una movida inteligente. Mi práctica actual es hacer lo mismo para atrás/adelante, incluso si se usa algún tipo de transición elegante en el sitio. Esto evita conflictos entre lo que el navegador podría hacer y la transición del sitio

+0

No estoy seguro de entender lo que quiere decir con "el golpe tiene su propio revelar estilo deslizando la animación ". Las pequeñas animaciones de GitHub en popstate me parecen iguales en Chrome y Safari. –

+0

Sí, pero intente deslizar (con un panel táctil moderno de Apple) y verá lo que quiero decir ... – Greg

+1

Oh, Dios. Esto es horrible. Tuve que cambiar de un deslizamiento de tres dedos a uno de dos dedos para hacerlo realidad. –

Respuesta

7

Usted puede utilizar el evento rueda del ratón para ver si un desplazamiento horizontal en el panel táctil se ha realizado antes de su evento popstate:

// boolean that stores if a swipe has been performed. 
var bScrolled = false; 
// countdown in ms before resetting the boolean. 
var iTime = 1000; 
var oTimeout; 
window.addEventListener('mousewheel', function(e) { 
    if (e.wheelDeltaY === 0) { 
    // there is an horizontal scroll 
    if (!bScrolled) { 
    // no need to set bScrolled to true if it has been done within the iTime time. 
     bScrolled = true; 
     oTimeout = setTimeout(function(){ 
     bScrolled = false; 
     }, iTime); 
    } 
    } 
}); 

window.onpopstate = function() { 
    // clear the timeout to be sure we keep the correct value for bScrolled 
    clearTimeout(oTimeout); 
    // check if there has been a swipe prior to the change of history state 
    if (bScrolled) { 
    // check which browser & OS the user is using, then 
    // trigger your awesome custom transition. 
    } 
} 
-2

En una palabra, no. El deslizamiento está escrito en el código UNIX detrás de OS X y en el código del navegador Safari. El navegador reconoce el gesto y lo interpreta como los botones atrás/adelante.

Dicho esto, es probable que puedas escribir algún código que reconozca un desplazamiento en la página de una cierta velocidad que luego activaría tu código, pero siempre estarías en competencia con el reconocimiento del botón anterior/posterior codificado del navegador. Que yo sepa, no puede modificar el navegador desde HTML (o cualquier otro idioma, para el caso).

+0

Gracias por la respuesta, solo para que quede claro, no es necesario que evite la animación de deslizamiento (¡aunque sería agradable!). Ser capaz de detectarlo para evitar que ocurra mi propia transición sería suficiente. – Greg

+0

Lo sé. Lo que estoy diciendo es que la animación de deslizamiento está integrada en OS X, no en el programa. Por lo tanto, al menos que yo sepa, no puede detectarlo desde un navegador, ya que no puede acceder al sistema operativo del cliente desde el sitio web. –

+0

Ok, sí, mi propia prueba respalda eso - Intenté encontrar diferencias entre el objeto del evento para los diferentes casos, pero no sirvió para nada. – Greg

Cuestiones relacionadas