На этот вопрос уже есть ответ:

В последнее время я работаю над мобильным веб-приложением. Я оптимизирую мобильную версию, сосредоточив внимание именно на iOS для iPhone прямо сейчас. Мне не нужен точный внешний вид нативного приложения, но я думаю, что Чувство быть родным имеет абсолютное значение. Я сделал разметку и CSS, чтобы отразить эту идею, оставив меня с этим (аннотированный, чтобы лучше понять проблему, с которой я столкнулся позже):

Все это работает без проблем, а также имеет преимущество, заключающееся в том, что он имеет естественный вид, статический верхний и нижний колонтитулы, а также прокручиваемый внутренний вид (благодаря-webkit-overflow-scrolling: touch).

Как любой, кто использовал iOS более 5 минут, будет знать, что при прокрутке вверх или вниз вы получаете прекрасную прокрутку импульса. Кроме того, когда вы попадаете в начало списка, вы получаете хороший эффект «отказов»:

Я чувствую, что это помогает определить чувство iOS, и такая маленькая деталь может иметь большое значение. К счастью, когда вы находитесь ниже верхней части списка в прокручиваемом элементе веб-приложения и прокручиваете верхнюю часть, вы получаете тот же эффект. Это желаемое поведение В бою

Однако, когда вы находитесь в верхней части списка и пытаетесь воссоздать то же поведение в верхней части списка (например, Setting.app, как показано выше), мы получаем следующее поведение: нежелательно:

Я видел некоторыеаналогичны вопросо при переполнении стека, но все они отключают подпрыгивание. Мне интересно, возможно ли вообще держать подпрыгивая, но всегда заставляйте это происходить наbody section section#main, а не в веб-приложении Chrome. Я не использую jQuery, поэтому я предпочел бы, чтобы ответы были в простом JavaScript (хотя бонусные баллы за решение CSS).

Вот тебе GitHub repo со всем кодом (Sinatra, HAML и Sass; текущая ветвь -so) или JSFiddle с испорченными изображениями и ссылками, но показывает проблему на iPhone (лучше всего добавить на домашний экран для тестирования).