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

  1. aucun d'entre eux fournit une solution de travail pour tous les cas sur iOS 9.3.2
  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 dans type 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 de type 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