Ipad ligne horizontale safari lors du défilement

Empêcher le caoutchouc de la bande de défilement pour la page des applications simples dans Safari 5.1

29 juillet 2011

Safari 5.1 de (sur Mac OS X Lion) le défilement élastique est teh génial pour les sites web et les applications "classiques" web comme bon vieux rousseur de suivi du temps. mais pour les applications d'une seule page newfangled (comme notre prochain email twitter app de support, charme) qui ont leur propre mise en page et visent à ressembler davantage à des applications de bureau, il peut obtenir rapidement de la manière; qui est lorsque vous utilisez le défilement vertical sous-éléments (comme les listes) dans votre application.

Ne jamais craindre, ce petit extrait de CSS va désactiver le défilement élastique:

Cela bien sûr, désactive tous les défilement de l'élément de corps, de sorte que vous aurez besoin d'un div wrapper qui est overflow: auto autour de votre contenu respectif (éléments avec overflow: auto ne pas utiliser le caoutchouc de la bande de défilement).

À noter, la mise en overflow: scroll fera ressembler à la barre de défilement vertical ne va pas tout le chemin vers le bas. En effet, il n'y a plus de place pour une barre de défilement horizontale qui est pas nécessaire dans la plupart des cas, la solution est d'utiliser overflow-y: faites défiler ou juste le trop-plein: auto sur le défilement du contenu wrapper div.

À cet égard, le nouveau -webkit-overflow-scrolling: propriété tactile permettra un seul doigt défilement élastique des éléments dans une page, mais uniquement sur Safari Mobile dans la prochaine version d'iOS. Cette propriété ne change pas le comportement de défilement sur le bureau Safari (encore? Je souhaite qu'il y serait soutenu aussi).