在 iOS 移动端网页上禁用橡皮筋效果（也称为“overscroll”或“bounce”效果），主要有以下几种方法：
1. 使用 CSS 属性 overscroll-behavior:
这是最推荐和最现代的方法。overscroll-behavior 属性允许你控制浏览器在滚动到边界时的行为。
body {
overscroll-behavior-y: contain; /* 或 auto, none */
}
contain：只允许在滚动容器内出现橡皮筋效果，不会影响页面主体滚动。这是最常用的值，因为它保留了在可滚动区域（例如列表或div）内的反弹效果，但防止了整个页面反弹。none：完全禁用橡皮筋效果。auto：默认行为，允许橡皮筋效果。
2. 针对特定元素应用 overscroll-behavior:
你也可以将 overscroll-behavior 应用于特定的元素，例如一个 div，而不是整个 body。这允许你更精细地控制页面不同部分的滚动行为。
<div class="scrollable-content" style="overscroll-behavior-y: contain; height: 200px; overflow-y: auto;">
<!-- 内容 -->
</div>
3. 使用 JavaScript (不太推荐，除非其他方法无效):
在某些情况下，overscroll-behavior 可能无法完全解决问题，尤其是在处理复杂布局或与第三方库集成时。这时，你可以使用 JavaScript 来监听 touchmove 事件并阻止默认行为。
document.body.addEventListener('touchmove', function(event) {
if (document.body.scrollTop === 0 && event.deltaY > 0 ||
document.body.scrollHeight - document.body.scrollTop === document.body.clientHeight && event.deltaY < 0) {
event.preventDefault();
}
}, { passive: false }); // passive: false 很重要，否则 preventDefault() 将不起作用
这段代码会检查页面是否已经滚动到顶部或底部，并在尝试进一步滚动时阻止默认的橡皮筋行为。
一些需要注意的点：
passive: false: 在addEventListener的选项中设置passive: false非常重要，因为这会告诉浏览器你可能需要调用preventDefault()来阻止默认行为。如果不设置，preventDefault()将被忽略。- 兼容性:
overscroll-behavior拥有良好的浏览器兼容性，但在较旧的浏览器上可能需要使用 JavaScript 方法。 -webkit-overflow-scrolling: touch;: 这个 CSS 属性通常用于在 iOS 上启用平滑滚动。虽然它本身不会导致橡皮筋效果，但它有时会与其他因素相互作用，使问题更复杂。如果遇到问题，尝试移除或调整此属性。
建议优先使用 overscroll-behavior，因为它是最简单、最有效且最符合标准的方法。如果它不起作用，再考虑使用 JavaScript 解决方案。 记得测试你的解决方案，确保它在不同的 iOS 版本和设备上都能正常工作。