Ipad linha horizontal safari ao rolar

Prevenir rubber-band rolagem para aplicativos de uma única página no Safari 5.1

29 de julho de 2011

Safari 5.1 de (no Mac OS X Lion) rolagem rubber-band é teh impressionante para sites e "clássicos" aplicações Web como o bom e velho 'Sarda controle de tempo. mas para os aplicativos de uma única página newfangled (como o nosso próximo e-mail Twitter apoio app, Charme), que têm o seu próprio layout de página e destinam-se a olhar mais como aplicativos de desktop que pode rapidamente ficam no caminho; que é quando você usar sub-elementos de rolagem vertical (como listas) na sua aplicação.

Nunca medo, este pequeno trecho de CSS irá desativar rubber-band deslocamento:

Isto, naturalmente, desactiva todas rolagem do elemento corpo, então você vai precisar de uma div wrapper que é overflow: auto em torno do seu respectivo conteúdo (elementos com overflow: auto não usar rubber-band rolagem).

É de notar, definindo overflow: rolagem vai fazer parecer que a barra de rolagem vertical não está indo todo o caminho até o fundo. Isso ocorre porque não há espaço para uma barra de rolagem horizontal, que não é necessária na maioria dos casos, a solução para isso é usar overflow-y: rolar ou apenas o overflow: auto na rolagem div wrapper de conteúdo.

Relacionado a isso, o novo -webkit-scrolling-overflow: propriedade toque permitirá de dedo único elástico rolagem de elementos dentro de uma página, mas apenas no Mobile Safari na próxima versão do iOS. Esta propriedade não altera o comportamento de rolagem na área de trabalho Safari (ainda? Eu gostaria que seria apoiado lá também).