iOS/WebKit: touchmove/touchstart no funciona en la entrada & textarea

Question

Tengo una aplicación web IOS que no se puede desplazar. Por ese motivo, quiero desactivar el desplazamiento. Para hacer esto, utilizo el atributo ontouchmove de un elemento y lo llamo a una función que usa element.preventDefault. Sin embargo, no puedo detectar ningún evento conmovedor cuando se inicia en un área de texto o elemento de entrada, ¡incluso cuando el elemento está desactivado! También intenté vincular el evento touchmove o touchstart a estos elementos a través de addEventlistener de JavaScript, ¡sin éxito!

Y aquí es mi JavaScript:

function onBodyLoad() { 

document.addEventListener("touchstart", doNotScroll, true); 
document.addEventListener("touchmove", doNotScroll, true); 

} 

function doNotScroll(event) { 

event.preventDefault(); 
event.stopPropagation(); 

} 

Gracias por cualquier ayuda!

Answer 1

creo que he encontrado una gran solución para este problema utilizando el "puntero-eventos" propiedad CSS:

function setTextareaPointerEvents(value) { 
    var nodes = document.getElementsByTagName('textarea'); 
    for(var i = 0; i < nodes.length; i++) { 
     nodes[i].style.pointerEvents = value; 
    } 
} 

document.addEventListener('DOMContentLoaded', function() { 
    setTextareaPointerEvents('none'); 
}); 

document.addEventListener('touchstart', function() { 
    setTextareaPointerEvents('auto'); 
}); 

document.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
    setTextareaPointerEvents('none'); 
}); 

document.addEventListener('touchend', function() { 
    setTimeout(function() { 
     setTextareaPointerEvents('none'); 
    }, 0); 
}); 

Esto hará que Mobile Safari en iOS (otros no probados hasta ahora) ignorar las áreas de texto para desplazarse, pero permite establecer el enfoque, etc. como de costumbre.

Answer 2

el Thomas Bachem answer es el indicado!

Lo reescribí en jQuery. Solo agregue una clase scrollFix a sus entradas deseadas y ya está listo para comenzar. O adjunte los controladores de eventos a todas las entradas y áreas de texto usando $('input, textarea').

Ahora cuando toca y se desplaza en una entrada en iOS 8+, la entrada obtiene todo su pointer-events deshabilitado (incluido el comportamiento problemático). Esos pointer-events están habilitados cuando detectamos un simple toque.

$('.scrollFix').css("pointer-events","none"); 

$('body').on('touchstart', function(e) { 
    $('.scrollFix').css("pointer-events","auto"); 
}); 
$('body').on('touchmove', function(e) { 
    $('.scrollFix').css("pointer-events","none"); 
}); 
$('body').on('touchend', function(e) { 
    setTimeout(function() { 
     $('.scrollFix').css("pointer-events", "none"); 
    },0); 
});