javascript - 在不禁用滚动功能的情况下防止 iOS 弹跳

Question

当网页内容大于视口(viewport)时，我正在尝试实现一种解决方案，以防止 iOS 版 Safari 中的 iOS 反弹效果。

我正在处理的页面在结构上非常具体，与此页面非常相似 http://new.salt.ch/

• 基本结构是基于 Bootstrap 的。
• 它在顶部有一个固定的导航栏。
• 它有全屏背景幻灯片。
• 幻灯片有一个固定在视口(viewport)底部的叠加层。
• 有一个页脚元素可在 Canvas 外加载，并且仅在滚动内容时可见。
• 内容在导航栏后面滚动。
• 内容包括位于导航栏下方 20 像素处的标题和一系列位于视口(viewport)上方 20 像素处的按钮。
• 滚动时，按钮和标题都会在屏幕上移动以显示页脚。

我遇到的问题与页面上的问题相同http://new.salt.ch/因为当您向上滚动时，您会在屏幕底部看到弹跳效果，并显示背景和叠加层。

我尝试了各种解决方案，包括 iNoBounce.js、Nonbounce.js 以及我在 SO 上找到的其他一些建议。

我总是遇到同样的问题...当我尝试禁用弹跳时，所有滚动都被禁用。我猜这是因为内容(页脚除外)总是足够大以至于不需要滚动，因此滚动被禁用并且页脚不再可通过滚动访问。

Answer 1

此代码应停止反弹，因为它是反弹的 HTML 标记

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}