Empêchez le rebond de défilement pour l'élément body, mais conservez-le pour les éléments enfants dans iOS
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 pour le moment. Je ne veux pas l'aspect précis d'une application native, mais je pense que le sentiment d'être natif est d'une importance absolue. J'ai créé le balisage et les CSS pour refléter cette idée, ce qui me laisse (annoté pour mieux comprendre le problème que je rencontre plus tard):
Tout cela fonctionne sans problème et offre également l’avantage d’avoir une sensation native, avec en-tête et pied de page statiques et une vue interne à défilement (grâce à -webkit-overflow-scrolling: touch).
Comme le savent tous ceux qui ont utilisé iOS pendant plus de 5 minutes, lorsque vous faites défiler l'écran vers le haut ou le bas, vous obtenez un défilement Nice Momentum. En outre, lorsque vous cliquez en haut de la liste, vous obtenez un effet de «rebond» de Nice:
Je pense que cela aide à définir le sentiment de iOS, et un si petit détail peut aller un long chemin. Heureusement, lorsque vous êtes au-dessus du haut d'une liste dans un élément de défilement d'une application Web, et que vous faites défiler le haut de la liste, 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 valeur Setting.app, voir ci-dessus), nous obtenons le comportement suivant, qui est non désiré: 
J'ai vu des similairesquestions sur Stack Overflow, mais ceux-ci optent tous pour la désactivation du rebond. Je me demande s'il est tout à fait possible de continuer à rebondir, mais toujours le faire apparaître sur body section section#main, pas sur chromede webapp. Je n'utilise pas jQuery, je préférerais donc que les réponses soient en JavaScript direct (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 affiche le problème en question sur un iPhone ( préférable d'ajouter à l'écran d'accueil pour tester).
OLD INFO: J'ai résolu ce problème: http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html
NEW INFO: Ceci est maintenant un plugin jQuery qui peut être trouvé ici: http://www.hakoniemi.net/labs/nonbounce/ .
Il existe plusieurs problèmes, tels que la perte de la fonctionnalité de zoom lorsque cette option est appliquée ou que la mise à jour dynamique ne fonctionne pas correctement.
Mais maintenant, le moyen le plus simple est de définir: <div class="nonbounce">...</div> puis $.nonbounce();
J'ai rencontré le même problème et suis venu avec cette solution:
http://demo.josefkjaergaard.com/stackoverflow/element_scroll/index.html
En gros, j'empêche le contenu de défilement d'être dans ses positions maximales. Cela empêche l'activation du défilement du corps.
Cela fonctionne, mais cela crée un petit accrochage à la fin de l’assouplissement. Avec un peu plus de travail, ce comportement pourrait probablement être masqué en décalant le contenu dans une direction opposée.
Voici quelques ressources utiles que j'ai trouvées sur le sujet:
Que diriez-vous de ce pseudo-code:
document.body.addEventListener("ontouchstart", function(event) {
if(document.getElementById("main").scrollTop > 0) return;
event.preventDefault();
event.stopPropagation();
}, false);