Empêcher le débordement / ruban défilant sur iOS
Il y a déjà plusieurs questions sur le sujet de débordement/ruban défilant sur mais
- aucun d'entre eux fournit une solution de travail pour tous les cas sur iOS 9.3.2
- aucun d'entre eux donne approfondie et complète de l'information sur le problème lui-même
c'est pourquoi j'ai créé ce post comme un ensemble de connaissances.
Le problème:
La chose qui n'a jamais été mentionné dans un autre post, c'est que iOS dépassement de défilement est en deux partie du comportement.
1. Débordement de défilement de contenu avec overflow: auto/scroll
Ce qui est communément connu et voulais surtout le comportement d'un élément avec -webkit-overflow-scrolling: touch
où le continu/le défilement dynamique de comportement va au-delà des éléments conteneur pour ralentir le défilement du contenu en douceur.
Il se passe lorsque vous faites défiler le contenu d'un élément avec un élan assez élevé pour que le défilement dynamique à aller au-delà de la longueur de la défilé de contenu.
Avec ce comportement, le element.scrollTop
propriété de changer en conséquence les éléments de la position de défilement et de moins de 0 ou plus grand que le maximum de défilement (element.scrollHeight - element.offsetHeight
).
2. Débordement de défilement de <body>
Ce comportement se produit si vous essayez de faire défiler tout élément déjà à son minimum/maximum de la position de défilement de même plus loin que cela (un élément en haut vers le haut ou élément à fond vers le bas). Puis le défilement semble "remonter" jusqu'à la <body>
de la balise et de l'ensemble de la fenêtre d'affichage défile.
Au contraire au-dessus de la element.scrollTop
propriété ne change pas, mais document.body.scrollTop
modifications à la place.
Mémorisation et la commutation entre les comportements (1,5 s de retard)
Le plus irritant chose dans ce contexte est que le switch entre les deux types décrits ci-dessus ne permet pas de basculer instantanément.
Après vous entrez dans l'un des deux vous ne pouvez pas basculer le focus sur un autre élément (défilement des éléments, des boutons, des liens, ...) et ainsi le défilement comportement ne change pas.
Par exemple: si vous faites défiler jusqu'à un élément déjà lors de sa première position vers le haut, vous entrez
overflow scrolling type 2
et la réaction la plus naturelle pour un utilisateur est alors essayez de faire défiler vers le bas. Parce que l'accent est verrouillé sur le corps de défilement au lieu d'aller àoverflow scrolling type 1
il reste danstype 2
et le corps tout entier défile vers le bas. L'utilisateur typique commence ensuite à la arbitrairement commence à défiler vers le haut et vers le bas le plus souvent, sans jamais sortir detype 2
.
Le commutateur de mise au point et donc le changement de comportement de défilement ne peut intervenir qu'après le débordement de l'animation est terminée et l'élément est toujours debout (même un peu plus [environ 0,5 s]).
donc revenir à l'exemple précédent, la bonne réaction de l'utilisateur serait d'arrêter de toucher l'écran pour environ 1 - 1,5 s et puis essayez de faire défiler vers le bas de nouveau.
OriginalL'auteur Aides | 2016-06-02
Vous devez vous connecter pour publier un commentaire.
La solution:
De Type 1:
Les plus élémentaires de la solution pour éviter le débordement de défilement sur l'élément lui-même est d'empêcher par défaut sur les événements tactiles.
Cette méthode a cependant désactive les navigateurs natifs de l'élan de défilement et n'est donc pas adapté pour la plupart des applications. Avec un certain raffinement cependant (seulement de prévenir si haut défilement vers le haut ou au bas de défilement vers le bas, ...), cette méthode résout la plupart des problèmes. De nombreuses implémentations possibles peuvent être trouvées dans cette SORTE de post.
De Type 2:
Dépassement de défilement sur le corps, cependant, n'est pas empêché par les méthodes décrites ci-dessus.
Une solution possible qui semble raisonnable est d'empêcher l'élément de jamais être à sa position supérieure ou inférieure décrite comme la meilleure solution sur la question.
Cela n'a toutefois pas fiable sur iOS 9.3.2.
Ce qui ne fonctionne toutefois est le réglage de
position: fixed
sur le<body>
élément pour empêcher le corps de se déplacer. Veuillez noter cependant que ce n'est toujours pas complètement arrêtertype 2
de passe, qui est pourquoi, parfois, vous ne pouvez pas faire défiler/focus tout élément parce que dans le fondtype2
avec son accent de verrouillage est encore en cours (encore une fois, après vous arrêter de toucher l'écran pendant un moment, le nouveau fonctionne comme prévu).Même si c'est encore loin d'être la solution optimale, il semble être le meilleur que nous pouvons obtenir pour le temps de parler.
Edit: Veuillez noter que je ne suis pas sûr si il est sûr de mettre
position: fixed
sur un<body>
élément. Pour identifier les éventuels problèmes que j'ai créé la suite DONC, après les. Apparemment, il peut être préférable de créer un wrapper de l'élément enfant de corps et que cet élémentposition: fixed
pour éviter zoom problemes.Edit 2: La solution définitive
Le script iNoBounce fonctionne à merveille. Il suffit de charger la page et l'expérience d'un rebond application web gratuite. Jusqu'à présent, je n'ai pas trouvé de problèmes avec cette solution.
iNoBounce empêche tout simplement en le tirant vers le bas qui à son tour empêche de défilement, de sorte qu'il déchire tout
merci!!!! merci!!!! merci!!!!
Cela empêche de défilement tout à fait. Il gèle l'ensemble de l'application sur un seul, non-défilement de l'écran.
Lire le plugin description. Il dit
You've built a nice full-screen mobile webapp, complete with scrollable elements using the -webkit-overflow-scrolling property.
Vous devez utiliser le-webkit-overflow-scrolling
propriété pour les éléments que vous voulez faire défiler. Je suppose que si vous souhaitez supprimer le rebond surbody
, vous devez utiliser une position absolue, pleine largeur/hauteur de la div wrapper avecoverflow: scroll
.OriginalL'auteur Aides