web-dev-qa-db-fra.com

iOS: désactivez le défilement par rebond mais autorisez le défilement normal

Je ne veux pas que le contenu de mon site traîne lorsque l'utilisateur atteint le bord d'une page. Je veux juste que ça s'arrête.

La solution javascript omniprésente que je vois partout est la suivante:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

Mais cela empêche le défilement entièrement. Est-il possible de simplement supprimer le rebond. De préférence avec CSS ou une balise META par opposition à JS, mais tout ce qui fonctionne fera l'affaire.

javascriptiosiphonecssmobile-safari
22
emersonthis

Je dois ajouter une autre réponse. Ma première approche devrait fonctionner, mais il y a un bogue iOS, qui encombre encore toute la page, même si e.stopPropagation.

mikeyUX trouve une solution pour cela: https://stackoverflow.com/a/16898264/2978727 Je me demande pourquoi il obtient quelques clics pour cette excellente idée ...

Voici comment j'ai utilisé son approche dans mon cas:

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});
19
Michael P

Désactivez le rebond en empêchant le comportement par défaut du document:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

Autoriser le défilement en empêchant que le toucher atteigne le niveau du document (où vous empêcheriez le défilement):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

Attention à la différence entre ces deux:

event.stopPropagation()
event.preventDefault()

StopPropagation devrait être votre choix ici! Voici une très bonne explication: http://davidwalsh.name/javascript-events

Edit: Même problème, même solution: document.ontouchmove et défilement sur iOS 5

Edit2: correction de faute de frappe dans les noms de variables, ajout de crochets après les méthodes

12
Michael P

J'ai essayé beaucoup d'approches différentes que j'ai trouvées ici sur stackoverflow, mais iNoBounce a été la chose qui a vraiment fonctionné pour moi: https://github.com/lazd/iNoBounce

Je viens de l'inclure dans mon index.html:

<script src="inobounce.js"></script>
2
Omer Leshem

Cette bibliothèque est la solution pour mes scénarios. Un moyen facile à utiliser il suffit d'inclure la bibliothèque et d'initialiser où vous voulez comme ceux-ci;

noBounce.init({   
    animate: true
});

Si vous voulez éviter de rebondir sur un seul élément et non sur toute la page, vous pouvez le faire comme:

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  });
2
Nezir Yürekli

Si vous appliquez à Desktop Browser, vous n'avez pas besoin de codes JavaScript, juste quelques lignes de codes CSS:

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}
1
RoberMac

J'ai trouvé un code qui a fonctionné pour moi, je crois que cela fonctionnera pour vous.

La solution est écrite ici: http://apdevblog.com/optimizing-webkit-overflow-scrolling/

Fondamentalement, vous devez avoir ce code js:

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

Et puis, ayez vos divs défilables avec la classe = "scrollable".

0
Cesar

Après avoir essayé ces suggestions et lu plusieurs articles, le correctif pour moi était d'utiliser la propriété CSS <overflow-x: hidden; > sur l'élément/contenant problématique.

0
Chev Dev