¿Cómo evito el comportamiento predeterminado del evento touchmove en iOS 5?

Question

que tienen una aplicación basada en web que incluye un componente que el usuario puede desplazarse hacia arriba y hacia abajo con su dedo. Utilizo el método preventDefault del evento para evitar el comportamiento predeterminado donde el movimiento táctil desplaza toda la pantalla en dispositivos iOS.

Desafortunadamente, esto no parece que trabajar más en IOS 5, que Acabo de actualizar a esta mañana. Tengo que suponer que esto se hace de forma diferente en iOS 5, pero aún no he podido encontrar un recurso que proporcione instrucciones.

Gracias!

Actualización n. ° 1: No he podido encontrar una respuesta a mi pregunta específica, pero pude ajustar un poco mi código para usar el estilo -webkit-overflow-scrolling (establecido en un valor de "táctil" ") e implemente la capacidad de desplazamiento inercial snazzy (donde el contenido se desplaza más rápido según la velocidad de deslizamiento y" rebote de banda elástica "si llega a los límites. Muy bien parecido ...

Actualización n. ° 2: Tengo otro problema extraño ahora. Por alguna extraña razón, el comportamiento de desplazamiento por desbordamiento se mezcla a veces por lo cual tienes que arrastrar el dedo hacia la izquierda y la derecha en el elemento que lo contiene para hacer que su contenido se mueva hacia arriba o hacia abajo. para descubrir por qué sucede esto, ¿alguien tiene alguna idea?

Answer 1

En primer lugar, se puede verificar que e.preventDefault() desactiva todas desplazamiento en IOS 5 usando el siguiente código:

document.ontouchmove = function(e){ e.preventDefault(); } 

Desafortunadamente, sin embargo, esto desactiva el desplazamiento en caso de desbordamiento: desplazarse divs. (Si alguien tiene una solución que deja habilitado el desplazamiento del elemento interno, compártala.)

Respecto a la actualización n. ° 2, he notado un comportamiento extraño cuando hay un elemento desplazable anidado en otro elemento desplazable (incluida la página). En ocasiones, el dispositivo duda sobre qué elemento desea desplazarse el usuario. En particular, he notado este problema al usar la posición: fijo. Mi solución fue asegurarme de que el cuerpo tenga un 100% de altura y que los elementos desplazables usen la posición: absoluta cuando sea posible.

Answer 2

he encontrado una solución muy simple. Cuando el evento golpea tu elemento que tiene permiso para desplazarse, simplemente agrega bandera en el evento. En el detector de eventos en el documento que acaba de comprobar si se establece el indicador y sólo detener el evento si la bandera no está definida:

this.$scrollableEl.on('touchmove', function(event){ 
    event.comesFromScrollable = true; 
    //when you have containers that are srollable but 
    //doesn't have enough content to scroll sometimes: 
    //event.comesFromScrollable = el.offsetHeight < el.scrollHeight; 
}) 

$document.on('touchmove', function(event){ 
    if(!event.comesFromScrollable){ 
     event.preventDefault() 
    } 
    }) 

También es posible usar event.stopImmediatePropagation lugar, por lo que no necesita la eventListener en el documento elemento, pero esto rompe Zepto.js tap en mi caso:

this.$scrollableEl.on('touchmove', function(event){ 
    event.stopImmediatePropagation() 
})