javascript - posicion - saber cuando se hace scroll jquery

Detecta si el elemento ha detenido el movimiento de desplazamiento?

Question

¿Es posible detectar si un elemento ha dejado de desplazarse en Mobile Safari a través de Javascript?

Tengo un elemento que tiene desplazamiento de impulso al usar -webkit-overflow-scrolling:touch , y necesito detectar si el elemento ha dejado de desplazarse, incluso después de que el impulso afecta al desplazamiento.

es posible? Usar el evento onscroll no funciona como debería en mi aplicación.

Answer 1

En mi caso, esto funcionó a la perfección:

var temp=0;
var timer;
$(scrollWrapper).on(''scroll'',function(e){
    if(timer)
    {
        clearTimeout(timer);
    }
    temp=Math.floor(Date.now());
    timer=setTimeout(function(){
        temp=0;
    }, 55)
})

// to check if scroll has finished
if (temp === 0)
{
    //scroll has finished
}
else
{
    // scrolling...
}

La idea es establecer una variable continuamente en scroll. Si el desplazamiento se ha detenido (espere 55 ms; hasta entonces, si el temporizador no se borra, se supone que el desplazamiento ha finalizado) y luego reinicie la variable.

Answer 2

Puede calcular una velocidad de deslizamiento e intentar averiguar si el desplazamiento de impulso ocurrirá en función de algún valor de umbral. He hecho algunas pruebas y alrededor de 0.25 píxeles / ms parece ser un buen valor.

Nota: A veces, el desplazamiento de momento también ocurrirá para velocidades más bajas. La velocidad más baja para causar desplazamiento de impulso que registré fue de 0.13 (con un tiempo delta muy corto), por lo que si necesita una solución perfecta al 100%, siga buscando.

El código de ejemplo también detecta y se ocupa de sobredesplazamiento.

Usando JQuery;

var scrollWrapper = $(''#myWrapper'');
var starTime, startScroll, waitForScrollEvent;
scrollWrapper.bind(''touchstart'', function() {
   waitForScrollEvent = false;
});

scrollWrapper.bind(''touchmove'', function() { 
  startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop();
});

scrollWrapper.bind(''touchend'', function() {
  var deltaTime = new Date().getTime() - startTime;
  var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop());
  if (deltaScroll/deltaTime>0.25 
        || scrollWrapper.scrollTop()<0 
        || scrollWrapper.scrollTop()>scrollWrapper.height()) {
    // will cause momentum scroll, wait for ''scroll'' event
    waitForScrollEvent = true;
  }
  else {
    onScrollCompleted(); // assume no momentum scroll was initiated
  }
  startTime = 0;
});

scrollWrapper.bind(''scroll'', function() {
  if (waitForScrollEvent) {
    onScrollCompleted();
  }
});