Esta pergunta já tem uma resposta aqui:

Eu tenho trabalhado em um webapp móvel ultimamente. Estou otimizando para dispositivos móveis primeiro, concentrando-me especificamente no iOS para o iPhone no momento. Não quero a aparência precisa de um aplicativo nativo, mas acho que osentindo-m ser nativo é de importância absoluta. Fiz a marcação e o CSS para refletir essa ideia, deixando-me com isso (anotado para entender melhor o problema que estou tendo mais tarde):

Isso tudo funciona sem problemas e também tem a vantagem de ter uma sensação nativa, com cabeçalho e rodapé estáticos e uma vista interna rolável (graças a-webkit-overflow-scrolling: touch).

Como qualquer pessoa que use o iOS por mais de 5 minutos saberá que, quando você rola para cima ou para baixo, obtém uma boa rolagem de momento. Além disso, quando você atinge o topo de uma lista, obtém um bom efeito de 'rejeição':

Sinto que isso ajuda a definir a sensação do iOS, e um detalhe tão pequeno pode percorrer um longo caminho. Felizmente, quando você está abaixo do topo de uma lista em um elemento rolável em um aplicativo da Web e passa o topo, obtém o mesmo efeito. Isto é ocomportamento desejad em ação:

No entanto, quando você está no topo da lista e tenta recriar o mesmo comportamento de rejeição no topo da lista (no Setting.app, visto acima), obtemos o seguinte comportamento, que énão desejado:

Eu já vi algunssemelhant questõe no Stack Overflow, mas todos eles optam por desativar o salto. Gostaria de saber se é possívelkeep saltando, mas sempre faça acontecer embody section section#main, não no chrome da webapp. Como não estou usando jQuery, prefiro respostas em JavaScript direto (pontos de bônus para uma solução CSS

Aqui está umGitHub repo com todo o código (Sinatra, HAML e Sass; o ramo atual éso) ou um JSFiddle com imagens e links quebrados, mas mostra o problema em questão em um iPhone (é melhor adicionar à tela inicial para testar