Comment figer le scroll du body sur iOS ?

Bonsoir les Alsacréateurs !

Sur iOS (iPhone et iPad en tous cas), lorsqu'on atteint le fin ou le début d'une page, il y a un effet de "rebond": ce qui est très bien dans 99% des cas.

Sauf...

Lorsqu'on a conteneur occupant 100% de la hauteur lui-même contenant un div en overflow:auto : une fois sur deux le focus se fait de le body et non le div. Résultat : obliger de pédaler avec son index pour tenter "raccrocher" le div overflow au lien du body.

Je ne sais pas si je suis bien clair alors voici une petit illustration :
http://codepen.io/dasys/full/xVLEGW/

Si je sors du cadre rouge : game over, j'ai toutes les peines à retrouver le focus sur le div.

Connaissez-vous une méthode pour empêcher le body de d'iOS de scroller ?

note : bien entendu il faut le voir sur iPhone ou iPAd

D'avance mille mercis !

Bien à vous.

Hello,

Je ne comprends pas trop ton soucis... Je viens de faire le test et rien ne me choque vraiment. Juste le fait que ce soit un scroll dans un scroll ton peut-être ? Sur iOs, tu dois attendre que l'animation de rebond soit finalisée pour pouvoir scroller ton .wrapper.

Au chose, je ne pense pas que tu auras la main sur ce rebond qui est un comportement du navigateur et pas du rendu de la page...

Au vu de l'exemple, pourquoi ne pas avoir un scroll sur body à la place de .wrapper ?

Holà Yordi et merci pour ta réponse et tes explications.

En fait, j'ai essayé de reproduire au plus près le structure du projet en isole le "problème" pour la demo codepen.

Il y aurait un solution CSS pour annuler le rebond d'iOS du body (source http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/) :

body {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Cela fonctionne plutôt bien (en dehors de codepen) : le body ne rebondit plus...

Mais comme tu l'indiquais iOS attend que l'animation -fantôme à présent- se termine avant de redonner la focus sur le div overflow:auto