es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Detectar el desplazamiento del documento en dispositivos móviles sin evento táctil.

17 Jun, 2023 Programación

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:

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Un enfoque alternativo para detectar el desplazamiento de documentos en dispositivos móviles es utilizar el evento scroll en lugar del evento touchmove. 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:

    var wave = $('.front-page__mobile-wave');
var height = $(document).height();
var width = wave.width();
var oneWidth = width/100;

$(window).on('scroll', function () {
    var scroll = $(this).scrollTop();
    var percentHeight = scroll / height * 100;
    var bgSlideForward = oneWidth * percentHeight;
    var bgSlideBack = -oneWidth * percentHeight;
    wave.css('left', -bgSlideForward);
});

    En este ejemplo, estamos vinculando el evento scroll al objeto window 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 evento scroll 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.

Comments are closed.