Estoy tratando de lograr un efecto en un sitio en el que estoy trabajando, donde a medida que el usuario se desplaza verticalmente, un elemento se desliza horizontalmente la cantidad relativa (es decir, si el usuario se desplaza hacia abajo un 10 % de la altura del documento, el elemento en particular se moverá a la izquierda un 10% de su propio ancho).

El problema que tengo es que estoy usando los eventos touchstart y touchend para calcular cuánto se ha desplazado verticalmente el usuario. Sin embargo, en los dispositivos móviles (p. ej., iPhone), el documento seguirá desplazándose durante un rato después de que el usuario termine de pasar el dedo y deje de tocar la pantalla.

¿Existe una forma alternativa de detectar el desplazamiento del documento en dispositivos móviles que incluirá la distancia recorrida después de que finalice el evento táctil?

¡Gracias!

Mi código:

 var wave = $('.front-page__mobile-wave'); var height = $(document).height(); var width = wave.width(); var oneWidth = width/100; var ts; $(document).bind('touchstart', function (e){ ts = e.originalEvent.touches[0].clientY; }); $('.front-page').bind('touchmove', function(e){ var te = e.originalEvent.changedTouches[0].clientY; var scroll = $(window).scrollTop(); var percentHeight = scroll / height * 100; var bgSlideForward = oneWidth * percentHeight; var bgSlideBack = -oneWidth * percentHeight; if(ts < te){ wave.css('left', bgSlideBack); } else if (ts > te){ wave.css('left', -bgSlideForward); } });