overscroll-behavior 不能禁用 ios 橡皮筋效果，仅控制滚动链式传播；ios 橡皮筋由 webkit 底层实现，css 无法关闭，真正生效场景是嵌套可滚动容器。
什么是 overscroll-behavior，它真能禁掉 iOS 橡皮筋效果？
不能。这是最常见的误解。overscroll-behavior 只控制「滚动链式传播」，比如模态框滚动到底后是否触发外层页面滚动；但它**完全不干预系统级的橡皮筋回弹（rubber banding）行为**，尤其是 iOS Safari 的原生拖拽回弹。iOS 上真正的橡皮筋由 WebKit 渲染引擎底层实现，CSS 无权关闭。
为什么给 html 或 body 设 overscroll-behavior: contain 没用？
因为移动端浏览器（尤其 Safari）对 html 和 body 元素的滚动行为有特殊处理逻辑：overscroll-behavior 在这两个元素上被忽略或降级为 auto。实测中即使显式设置，开发者工具里也显示 computed 值为 auto，且橡皮筋照常发生。
真正生效的场景是「嵌套可滚动容器」，例如：
- 一个
position: fixed的弹窗，内部有长内容需滚动 - 一个
overflow-y: auto的侧边栏抽屉 - 使用
touch-action: none+ 自定义滚动的区域
此时对这个容器设 overscroll-behavior: contain，才能阻止它滚到底后把滚动事件“透传”给父级，从而避免触发页面整体回弹。
那 iOS 橡皮筋到底怎么抑制？靠谱方案只有两个
目前唯一稳定、无需 JS 库、兼容 iOS 15+ 的方式是组合使用：
-
body { overscroll-behavior: none; }—— 虽然 Safari 对body不完全支持，但配合下一条可提升一致性 -
body { position: fixed; width: 100%; height: 100%; overflow: hidden; }—— 强制 body 失去滚动能力，把滚动委托给内部容器（如#app） - 再给实际滚动容器加
overscroll-behavior: contain，并确保其height和overflow设置正确
注意：该方案会丢失 body 的默认滚动锚点和 scroll restoration 行为，如果页面有锚点跳转或 history scroll 恢复需求，必须用 JS 手动接管 scrollTo。
容易被忽略的关键细节
即使上述 CSS 组合生效，仍有三个隐藏雷区：
- iOS Safari 中，
input或textarea获焦时仍可能触发橡皮筋（系统键盘唤起导致 viewport 缩放/重排），此时需监听focusin并临时scrollTo(0, 0) -
overscroll-behavior不支持 Safari ≤ 15.4，旧版需降级为touch-action: none+ 自研滚动，但会牺牲惯性滚动 - 某些 WebView（如微信内置浏览器）对
overscroll-behavior支持更差，建议用 UA 检测后 fallback 到preventDefaultontouchmove，但务必限定在非输入框区域
橡皮筋不是 bug，是 iOS 的交互范式。强行禁用前，先确认用户是否真的需要——比如全屏游戏或手势导航场景才值得投入这些 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
