Empêcher le rebond de défilement pour l'élément body, mais le conserver pour les éléments enfants dans iOS

Question

Je travaille depuis peu sur une application web mobile. J'optimise le mobile d'abord, en me concentrant spécifiquement sur iOS pour l'iPhone en ce moment. Je ne veux pas avoir l'aspect précis d'une application native, mais je pense que le système d'exploitation de l'application est plus efficace. sentiment de d'être autochtone est d'une importance absolue. J'ai fait le balisage et le CSS pour refléter cette idée, ce qui me laisse avec ceci (annoté pour mieux comprendre le problème que je rencontre plus tard) :

Tout cela fonctionne sans problème, et il a également l'avantage d'avoir un aspect natif, avec un en-tête et un pied de page statiques, et une vue intérieure déroulante (grâce à -webkit-overflow-scrolling: touch ).

Comme toute personne ayant utilisé iOS pendant plus de 5 minutes le sait, lorsque vous faites défiler les pages vers le haut ou le bas, vous obtenez un défilement dynamique agréable. De même, lorsque vous atteignez le haut d'une liste, vous obtenez un bel effet de rebond :

J'ai l'impression que cela contribue à définir le sentiment d'iOS, et un si petit détail peut faire beaucoup. Heureusement, lorsque vous vous trouvez sous le haut d'une liste dans un élément défilable d'une application Web et que vous faites défiler la liste au-delà du haut, vous obtenez le même effet. C'est le comportement souhaité en action :

Cependant, lorsque vous êtes en haut de la liste, et que vous essayez de recréer le même comportement de rebond en haut de la liste (à la Setting.app, vue ci-dessus), nous obtenons le comportement suivant, c'est-à-dire non souhaité :

J'en ai vu similaire questions sur Stack Overflow, mais elles optent toutes pour la désactivation du rebond. Je me demande s'il est possible de continuez à rebondir, mais faites en sorte que cela se produise toujours sur body section section#main et non sur le chrome de la webapp . Je n'utilise pas jQuery, je préférerais donc que les réponses soient en JavaScript pur et simple (points bonus pour une solution CSS, cependant).

Voici un Repo GitHub avec tout le code (Sinatra, HAML, et Sass ; la branche actuelle est so ), ou un JSFiddle avec des images et des liens cassés, mais montre le problème en question sur un iPhone (le mieux est de l'ajouter à l'écran d'accueil pour le tester).

Answer 1

ANCIENNES INFORMATIONS : J'ai résolu ce problème : http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html

NOUVELLE INFO : Il s'agit maintenant d'un plugin jQuery que vous pouvez trouver ici : http://www.hakoniemi.net/labs/nonbounce/ .

Il y a plusieurs problèmes Il y a des problèmes, comme la perte de la capacité de zoom lorsque cela est appliqué ou la mise à jour dynamique qui ne fonctionne pas de manière fluide.

Mais maintenant, le moyen le plus simple est de définir : <div class="nonbounce">...</div> et ensuite $.nonbounce();

Answer 2

J'ai rencontré le même problème et j'ai trouvé cette solution :

http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html

En gros, j'empêche le contenu du scroll d'être dans sa position maximale, ce qui empêche l'activation du body-scroll.

Cela fonctionne mais cela crée un petit claquement à la fin de l'assouplissement. Avec un peu plus de travail, ce comportement pourrait probablement être masqué en décalant le contenu dans la direction opposée.

Answer 3

Que pensez-vous de ce pseudo-code :

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("main").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);

Answer 4

Voici quelques ressources utiles que j'ai trouvées sur le sujet :

• https://github.com/joelambert/ScrollFix
• http://apdevblog.com/optimizing-webkit-overflow-scrolling/
• http://www.hakoniemi.net/labs/nonbounce/
• http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
• http://cubiq.org/iscroll-4