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

Question

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

我正在处理的页面的结构非常具体，与该页面非常相似

• 基本结构是基于引导的。
• 它的顶部有一个固定的导航栏。
• 它具有全屏背景幻灯片播放。
• 幻灯片的覆盖层固定在视口的底部。
• 有一个页脚元素，可以加载画布，并且仅在滚动内容时可见。
• 内容在导航栏后面滚动。
• 内容由位于导航栏下方20px的标题和位于视口上方20px的一系列按钮组成。
• 滚动时，按钮和标题都将在屏幕上移动以显示页脚。

我遇到的问题与页面上的问题相同，因为向上滚动时，屏幕底部会出现反弹效果，并显示背景和覆盖。

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

我总是遇到相同的问题…当我尝试禁用弹跳时，所有滚动都被禁用。我猜这是因为内容（除页脚之外）总是足够大而无需滚动，因此滚动被禁用并且页脚不再可在滚动上访问。

Answer 1

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

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