document.ontouchmove et défilement sur iOS 5

Question

IOS 5 a apporté un certain nombre d'améliorations à JavaScript et aux applications Web. L'une d'elles est l'amélioration du défilement. Si vous ajoutez

-webkit-overflow-scroll:touch;

au style d'un élément textarea, le défilement fonctionnera bien avec un seul doigt.

Mais il y a un problème. Pour empêcher le défilement de tout l'écran, il est recommandé aux applications web d'ajouter cette ligne de code :

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

Toutefois, cela désactive le nouveau défilement.

Quelqu'un a-t-il un moyen agréable d'autoriser le nouveau défilement à l'intérieur d'une zone de texte, mais sans autoriser le défilement de l'ensemble du formulaire ?

Answer 1

Mise à jour Par Commentaire d'Alvaro si cette solution ne fonctionne plus à partir d'iOS 11.3.

Vous devriez pouvoir autoriser le défilement en choisissant si preventDefault est appelé ou non. Par exemple,

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

    e.preventDefault();
};

Il est également possible d'empêcher l'événement d'atteindre le niveau du document.

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

Modifier Pour ceux qui lisent plus tard, l'autre réponse fonctionne et est beaucoup plus facile.

Answer 2

Le seul problème avec la réponse de Brian Nickel est que (comme l'utilisateur1012566 l'a mentionné) stopPropagation n'empêche pas la formation de bulles lorsque vous atteignez les limites de votre scrollable. Vous pouvez empêcher cela en procédant comme suit :

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

Pour tous ceux qui essaient d'obtenir ce résultat avec PhoneGap, vous pouvez désactiver le défilement élastique dans le champ cordova.plist fixer la valeur de UIWebViewBounce à NO . J'espère que cela aidera les personnes qui passent des heures sur ce sujet (comme moi).

Answer 4

ScrollFix semble être la solution idéale. Je l'ai testé et il fonctionne comme un charme !

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);
};

Answer 5

Il était frustrant de découvrir un problème connu avec stopPropagation et le défilement natif des divs. Il ne semble pas empêcher le onTouchMove de rebondir, de sorte que lors du défilement au-delà des limites de la div (vers le haut en haut ou vers le bas en bas), la page entière rebondit.

Plus de discussion aquí y aquí .