ontouchstart - Los cambios de JavaScript de DOM en el touchmove se retrasaron hasta que el desplazamiento finaliza en el móvil Safari

touchmove jquery

Question

En el safari móvil, en el curso del manejo del touchmove de un elemento, cambio el nombre de className de ese elemento. Desafortunadamente, el cambio visual no se produce mientras el usuario se desplaza, o hasta el final de un desplazamiento inercial.

¿Qué puedo hacer para que el className tome visualmente de inmediato?

Más: al parecer, esto no se limita a los cambios de ClassName, sino a cualquier cambio en el DOM, como innerHTML y style .

Answer 1

Esto es por diseño, por desgracia. iOS safari pondrá en cola toda la manipulación de DOM hasta el final de un desplazamiento o gesto. Efectivamente el DOM se congela durante un desplazamiento.

Pensé que podría encontrar una referencia a esto en una página de desarrolladores de Apple, pero solo puedo encontrar este enlace a jQueryMobile: http://jquerymobile.com/test/docs/api/events.html .

Tenga en cuenta que los dispositivos iOS congelan la manipulación de DOM durante el desplazamiento y los ponen en cola para que se apliquen cuando finalice el desplazamiento. Actualmente estamos investigando formas de permitir que las manipulaciones de DOM se apliquen antes de que comience un desplazamiento

¡Espero que esto ayude!

Answer 2

Realmente construí ese sitio, y sí, la forma de evitar esta limitación es no desplazarse por el sitio usando la funcionalidad de navegador integrada, sino falsificarla. El JS escucha los eventos de la rueda y el teclado de desplazamiento y ajusta las propiedades superiores de css del contenedor principal a su propio ''scrollTop''. La barra de desplazamiento a la derecha es, por supuesto, una JS personalizada. En este caso, se sincroniza con el mismo valor interno ''scrollTop''.

En realidad, todo el sitio es solo una gran interpolación, con la línea de tiempo principal siendo su posición superior de desplazamiento y todas las animaciones secundarias se activan en ciertos momentos. El JS no está reducido, así que eche un vistazo en el archivo ScrollAnimator.js, está todo allí.

Answer 3

Simplemente cambia la posición a -webkit-sticky . No coloque la parte superior para que se vea como un elemento normal, sino que se comporte como un elemento fijo. Y puedes actualizar su estilo excepto la posición inmediatamente.