javascript - document.ontouchmove y desplazamiento en iOS 5

scroll ios5

Question

iOS 5 ha traído una serie de cosas agradables a JavaScript / Web Apps. Uno de ellos es el desplazamiento mejorado. Si agrega

-webkit-overflow-scroll:touch;

al estilo de un elemento textarea, el desplazamiento funcionará muy bien con un dedo.

Pero hay un problema. Para evitar que toda la pantalla se desplace, se recomienda que las aplicaciones web agreguen esta línea de código:

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

Esto, sin embargo, desactiva el nuevo desplazamiento.

¿Alguien tiene una buena manera de permitir el nuevo desplazamiento dentro de un área de texto, pero no permite que se desplace todo el formulario?

Answer 1

Debería poder permitir el desplazamiento seleccionando si se llama o no preventDefault. P.ej,

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

Alternativamente, esto puede funcionar al evitar que el evento alcance el nivel del documento.

elementYouWantToScroll.ontouchmove = function(e) {
    e.stopPropagation();
};

Editar Para cualquiera que lea más adelante, la respuesta alternativa funciona y es mucho más fácil.

Answer 2

El único problema con la respuesta de Brian Nickel es que (como se mencionó user1012566) stopPropagation no evita el burbujeo cuando alcanzas los límites de tu desplazamiento. Puede evitar esto con lo siguiente:

elem.addEventListener(''touchstart'', function(event){
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.prevTop = null; 
    this.prevBot = null;
    this.lastY = event.pageY;
});

elem.addEventListener(''touchmove'', function(event){
    var up = (event.pageY > this.lastY), 
        down = !up;

    this.lastY = event.pageY;

    if ((up && this.allowUp) || (down && this.allowDown)) 
        event.stopPropagation();
    else 
        event.preventDefault();
});

Answer 3

Fue frustrante descubrir un problema conocido con stopPropagation y desplazamiento div nativo. No parece evitar que onTouchMove burbujee, por lo que cuando se desplaza más allá de los límites del div (hacia arriba en la parte superior o hacia abajo en la parte inferior), toda la página rebotará.

Más discusión aquí y aquí .

Answer 4

Para cualquiera que intente lograr esto con PhoneGap, puede desactivar el desplazamiento elástico en cordova.plist , establezca el valor de UIWebViewBounce en NO . Espero que eso ayude a cualquiera a pasar años en esto (como yo).

Answer 5

ScrollFix parece ser la solución perfecta. ¡Lo probé y funciona como un encanto!

https://github.com/joelambert/ScrollFix

/**
 * ScrollFix v0.1
 * http://www.joelambert.co.uk
 *
 * Copyright 2011, Joe Lambert.
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

var ScrollFix = function(elem) {
    // Variables to track inputs
    var startY, startTopScroll;

    elem = elem || document.querySelector(elem);

    // If there is no element, then do nothing  
    if(!elem)
        return;

    // Handle the start of interactions
    elem.addEventListener(''touchstart'', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;

        if(startTopScroll <= 0)
            elem.scrollTop = 1;

        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
    }, false);
};