No puedo evitar que `touchmove` se desplace por la ventana en iOS

scroll mobile-safari

Question

Estamos intentando desplazar un elemento en nuestra aplicación web de iOS y, al mismo tiempo, evitar que la ventana se desplace. Estamos capturando el evento touchmove en la ventana, desplazando el elemento mediante programación y (intentando) evitar que la ventana se desplace al llamar a preventDefault en el evento.

Desafortunadamente esto no funciona en Mobile Safari. La ventana continúa desplazándose por debajo de nuestro elemento. El problema suena exactamente como el error del Webkit descrito en https://bugs.webkit.org/show_bug.cgi?id=163207 , pero ese problema supuestamente se solucionó en iOS 10.3 mientras que estoy ejecutando 11.3.

La captura de touchforcestart y la llamada preventDefault parecen evitar el desplazamiento de la ventana, pero lo estamos llamando en touchstart , que parece ser "demasiado tarde" ya que la ventana aún se desplaza. El desplazamiento solo se evita la próxima vez que se touchstart .

¿Alguna idea sobre lo que está pasando? Estamos desconcertados ya que esto es claramente un error pero parece que se solucionó hace algún tiempo.

Answer 1

Recientemente me encontré con este mismo problema. Deberá pasar { passive: false } al registrar el touchmove eventos touchmove . p.ej

document.addEventListener(''touchmove'', function(e) {
e.preventDefault();
}, { passive: false });

Esto se debe a que los escuchas de eventos de documentos táctiles ahora son pasivos de forma predeterminada en Safari 11.1, que se incluye con iOS 11.3. Este cambio está documentado en las notas de lanzamiento de Safari 11.1:

APIs web

• [...]
• Los oyentes de eventos táctiles actualizados para utilizar el modo pasivo mejoran el rendimiento de desplazamiento y reducen los bloqueos.