¿Verifica si el usuario está desplazándose con el panel táctil?

Question

He creado un sitio donde los usuarios pueden desplazarse por una galería usando el desplazamiento del mouse o la flecha arriba/abajo. Está funcionando como quiero y cambiando un desplazamiento de imagen al desplazarse con el mouse. Pero si el usuario está desplazándose con un panel táctil, es casi imposible desplazarse una sola imagen a la vez.

Así que mi pregunta es: ¿hay alguna manera de verificar si el usuario se desplaza por el panel táctil y luego cambiar el comportamiento del desplazamiento, por lo que se vuelve menos sensible y por lo tanto más fácil desplazar una imagen a la vez?

no soy muy bueno en jQuery, mi solución hasta el momento ha sido elaborado a partir de un par de secuencias de comandos:

http://jsfiddle.net/MukuMedia/PFjzX/33/

espero que alguien me puede ayudar :)

Answer 1

No, esto es imposible. La única solución en la que puedo pensar es establecer un límite en la velocidad de desplazamiento. No voy a tratar de descifrar el código, pero recomiendo hacer una variable timedOut inicializada a cero, que se establece en una cada vez que se desplaza a una nueva imagen. Use un setTimeout() para volver a establecerlo en cero después de, digamos, 50 ms. Antes de desplazarse a una nueva imagen, consulte esta variable timedOut y solo desplácese si es cero. (Asegúrese de colocar su setTimeout dentro de la verificación timedOut; de lo contrario, se la llamará constantemente cada vez que se mueva la rueda del mouse, que no es lo que desea)

Answer 2

Me encontré con un problema similar con un "cambio de sección" complemento que creé Terminé resolviéndolo con una variable de "animación": la acción de la rueda solo funciona si esta variable se establece en 'falso' y una vez que esto se activa la variable cambia a 'verdadero', luego cambiaría la variable a 'falso' una vez la animación esta completa Espero que esto ayude!

Answer 3

descubrí que el número mágico aquí era 40.

Parece que con el trackpad (probablemente con el Magic Mouse también) el delta obtener aumentó 40 veces.

Y sigue siendo así incluso si retira el mouse normal y se desplaza con él más tarde.

Entonces lo que hice, usando el jquery mousewheel plugin:

b.mousewheel(function(evt,delta,deltaX,deltaY){ 
    if(Math.abs(deltaY)>=40) 
     deltaY/=40; 
    if(Math.abs(deltaX)>=40) 
     deltaX/=40; 

    //Do your stuff here. 
}); 

Answer 4

Esto es más o menos lo que sugiere DC_. Pensé que publicaría esto ya que es una implementación real.

// similar to _.debounce, but was having issues with it, so I made this. 
function rateLimit(func, time){ 
     var callback = func, 
       waiting = false, 
       context = this; 
     var rtn = function(){ 
      if(waiting) return; 
      waiting = true; 
      var args = arguments; 
      setTimeout(function(){ 
       waiting = false; 
       callback.apply(context, args); 
      }, time); 
     }; 
     return rtn; 
    } 

    function onWheel(e){ 
     // do whatever 
    } 

    // will only fire a maximum of 10 times a second 
    var debouncedOnWheel = rateLimit(onWheel, 100); 
    window.addEventListener("onwheel", debouncedOnWheel); 

Answer 5

Encontré una solución que detecta si el usuario está usando una pantalla táctil. Funciona muy bien y solo tiene dos pequeños inconvenientes.

Primero detecta el desplazamiento de los ratones después del primer evento disparado, por lo que hay un clic con la rueda del mouse que no hace nada. Pero esta es solo la primera vez. Luego podemos almacenar en caché el valor que conduce al segundo pequeño problema. Cuando el usuario tiene un panel táctil y un mouse con rueda, detecta lo que primero se usa. Para mí esos problemas son insignificantes. Aquí el código

var scrolling = false; 
var oldTime = 0; 
var newTime = 0; 
var isTouchPad; 
var eventCount = 0; 
var eventCountStart; 

var mouseHandle = function (evt) { 
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined"; 
    console.log(isTouchPadDefined); 
    if (!isTouchPadDefined) { 
     if (eventCount === 0) { 
      eventCountStart = new Date().getTime(); 
     } 

     eventCount++; 

     if (new Date().getTime() - eventCountStart > 50) { 
       if (eventCount > 5) { 
        isTouchPad = true; 
       } else { 
        isTouchPad = false; 
       } 
      isTouchPadDefined = true; 
     } 
    } 

    if (isTouchPadDefined) { // in this if-block you can do what you want 
     // i just wanted the direction, for swiping, so i have to prevent 
     // the multiple event calls to trigger multiple unwanted actions (trackpad) 
     if (!evt) evt = event; 
     var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1; 

     if (isTouchPad) { 
      newTime = new Date().getTime(); 

      if (!scrolling && newTime-oldTime > 550) { 
       scrolling = true; 
       if (direction < 0) { 
        // swipe down 
       } else { 
        // swipe up 
       } 
       setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500); 
      } 
     } else { 
      if (direction < 0) { 
       // swipe down 
      } else { 
       // swipe up 
      } 
     } 
    } 
} 

document.addEventListener("mousewheel", mouseHandle, false); 
document.addEventListener("DOMMouseScroll", mouseHandle, false);