我正在尝试实施一种解决方案，以防止当网页内容大于视口时，iOS Safari 中的 iOS 反弹效果。
我正在处理的页面在结构上非常具体，与此页面非常相似http://new.salt.ch/
我遇到的问题与页面http://new.salt.ch/上的问题相同，因为当您向上滚动时，屏幕底部会出现反弹效果，并显示背景和叠加层。
我尝试了各种解决方案，包括 iNoBounce.js、Nonbounce.js 以及我在 SO 上找到的其他一些建议。
我总是有同样的问题......当我尝试禁用反弹时，所有滚动都会被禁用。我猜这是因为内容（页脚除外）总是足够大以至于不需要滚动，因此滚动被禁用并且页脚不再可在滚动时访问。
此代码应该停止反弹，因为它是反弹的 HTML 标记
html {
height : 100%;
overflow: hidden;
position: relative;
}
body {
height : 100%;
overflow: auto;
position: relative;
}
我浏览了一些关于 SO 的答案，在偶然发现这段代码之前，事情看起来很黯淡。
html {
position: fixed;
height: 100%;
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
样式声明body可以放在任何您希望能够滚动的元素上。您还可以改变overflow-x和overflow-y需要。我个人需要它不要滚动到两侧，所以我声明它是这样。
更新2017年9月15日：我不得不使用此修补另一个项目，我能够没有这些声明做position: fixed和height: 100%;上html选择。青年会
2018 年 4 月 12 日更新（在评论中提到）：如果您在页面上使用固定元素，滚动时这些元素可能会出现视觉“抖动”。
如果我正确解释了您的问题，多年来我们一直在开发跨平台移动网络应用程序时遇到同样的问题，试图让所有不同的专有滚动功能在每个设备上正常工作：Apple iOS、Google Android、Windows手机、笔记本电脑 Chrome、笔记本电脑 Safari、IE 和笔记本电脑 Edge。
jQuery Mobile 继续尝试在其框架范围内解决此问题，但由于每个设备制造商/操作系统制造商的不断更新，这太过分了。
是的，我们为每个单独的移动设备提供了解决方案。我们已经测试过，但没有认真考虑为每个设备开发设备选择性分页框架，要求我们检测每个设备并为每个设备提供一个略有不同的框架。基本上维护至少 3 个和实际上多达 12 个不同版本的代码，这是一个非常糟糕的主意。
解决方案：我们最幸运的是将持久的页眉和页脚放在页面框架的顶部。为简单起见，以下是使用内联样式的通用解决方案：
<html>
<head>
<title>Fixed Header and Footer on All Mobile Web Apps</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<style>
html, body { height:100%; width:100%; }
</style>
</head>
<body>
<div style="position: fixed; height:100%; width:100%; top:0; left:0;">
<div style="height:calc(100% - 1px); width:100%; margin-top: 60px; z-index: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
[Body Content That Can Scroll if it extends beyond screen...]
</div>
<div style="position: absolute; top:0; left:0; width:100%; height: 60px; background:#dddddd; z-index:10;">
[Header Content...]
</div>
<div style="position: absolute; bottom:0; left:0; width:100%; height: 40px; background:#cccccc; z-index:11;">
[Footer Content...]
</div>
</div>
</body>
</html>
因此，Body 可以是任何 jQuery Mobile 页面集。事实上，从理论上讲，Body 几乎可以是任何框架中的任何内容。
特别注意，高度为：calc(100% - 1px); 是关键的魔法。
这个问题看似无限的组合或排列，几乎成了我们这些年来的讨伐，试图找到最纯粹、最简单、最通用的解决方案。因此，在为该主题投入了大量令人尴尬的工时后，这不仅是我们最好的解决方案，而且还是我们发现的唯一一种通用兼容的方法，它还能让您坚持使用单一的代码库。它已在最新版本的 iOS、Windows Phone、Android、笔记本电脑 Chrome、笔记本电脑 Safari、PhoneGap、笔记本电脑 Firefox、IE 9-11 和 Windows Edge 上成功测试。
标签：移动应用、网络应用、固定页眉、固定页脚、持久页眉、持久页脚、滚动问题、iOS 滚动反弹、Chrome 滚动反弹、Android 滚动反弹、webkit 滚动问题、webkit 触摸滚动、iOS 触摸滚动问题
我使用了 iNoBounce https://github.com/lazd/iNoBounce，它运行完美！
如果您还需要允许水平滚动，santi6291在https://github.com/lazd/iNoBounce/pull/36 上有一个 pull request可以解决这个问题
对于 iOS 13 上的 2019 Safari，我能够使用此修复程序：
html {
overflow: hidden;
height: 100%;
position: fixed;
}
body {
overflow: auto;
height: 100%;
position: relative;
}
至少对我来说，它涵盖了大多数情况。