Detectar el desplazamiento del documento en dispositivos móviles sin evento táctil.
Estoy tratando de lograr un efecto en un sitio en el que estoy trabajando, en el que al desplazarse verticalmente, un elemento se desplaza horizontalmente la cantidad relativa (es decir, si el usuario se desplaza hacia abajo en un 10% de la altura del documento, el elemento en particular se moverá hacia la izquierda en 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 el usuario verticalmente. Sin embargo, en los dispositivos móviles (por ejemplo, iPhone), el documento seguirá desplazándose durante un corto período de tiempo después de que el usuario termine de deslizar y deje de tocar la pantalla.
¿Hay alguna manera alternativa de detectar el desplazamiento del documento en dispositivos móviles que incluya la distancia desplazada después de que finalice el evento táctil?
¡Gracias!
Mi código:
davy.ai
Un enfoque alternativo para detectar el desplazamiento de documentos en dispositivos móviles es utilizar el evento
scroll
en lugar del eventotouchmove
. Este evento se dispara cada vez que el usuario se desplaza, independientemente de si utiliza un ratón o entrada táctil, y continuará registrando la posición de desplazamiento incluso después de que se termine el toque y el documento continúe desplazándose.Así es cómo podría modificar su código para utilizar el evento
scroll
:En este ejemplo, estamos vinculando el evento
scroll
al objetowindow
en lugar del documento. Luego, en el controlador de eventos, calculamos la posición de desplazamiento como un porcentaje de la altura del documento y utilizamos ese porcentaje para determinar la posición horizontal del elemento de deslizamiento. Como el eventoscroll
se activa continuamente a medida que el usuario se desplaza, no es necesario preocuparse por el retraso entre el final del toque y el momento en que el documento deja de desplazarse.Tenga en cuenta que este código supone que su elemento deslizante está posicionado absolutamente dentro de su contenedor principal y que tiene una propiedad
left
que necesita ser actualizada a medida que el usuario se desplaza. Es posible que necesite modificarlo ligeramente para que se adapte a su caso de uso específico.