overscroll-behavior必须作用于实际滚动容器而非body/html，在ios safari中根元素无效；需满足overflow-y为auto/scroll、有明确高度、内容真实溢出三条件；uni-app和小程序需穿透至内部滚动节点如.uni-scroll-view-content；ios 16.4+才原生支持，旧版需降级处理。
overscroll-behavior必须作用于滚动容器，不是body或html
直接写 body { overscroll-behavior: none; } 在 iOS Safari 中完全无效——computed 样式里会显示为灰色禁用状态。浏览器底层锁定根元素的 overscroll 行为，CSS 无权干预。
真正起效的是实际发生滚动的容器，比如：.content、#list-container、.modal__content。它必须同时满足三个条件：
-
overflow-y: auto或scroll（不能是visible） - 有明确高度（如
height: 60vh、max-height: 400px；min-height或依赖内容撑开的高度不行） - 内容真实溢出（否则浏览器不认为它是可滚动上下文）
uni-app 和微信小程序中要穿透到内部滚动节点
像 <uni-scroll-view></uni-scroll-view> 或 <scroll-view></scroll-view> 这类封装组件，滚动行为实际发生在内部节点上，比如 .uni-scroll-view-content。只给组件标签加样式没用。
必须用深度选择器穿透：
:deep(.uni-scroll-view-content) {
overscroll-behavior: none;
}
注意：::v-deep 在 Vue 3 中已废弃，推荐用 :deep()；微信小程序需查文档确认是否支持 ::after 类伪元素穿透，部分版本需改用 class 名直接命中。
常见错误：
- 只写
:deep(.uni-scroll-view) { overscroll-behavior: none; }—— 外层容器不滚动，属性不生效 - 漏掉嵌套结构中的内层滚动区（如弹窗里的
.popup-list），导致手指划到底部仍透出背景回弹
旧版 iOS（iOS 12 及以下）需要降级处理
overscroll-behavior 在 iOS 16.4+ 才原生支持，iOS 12–16.3 完全不识别该属性。此时仅靠 CSS 无法禁用橡皮筋，必须配合：
-
-webkit-overflow-scrolling: auto（不是touch）——关闭惯性滚动引擎，削弱弹性反馈 - 确保滚动容器有固定高度，且未被
position: fixed或overflow: hidden父级截断事件流 - 避免在
touchmove中无条件调用e.preventDefault()，否则会锁死原生滚动管线，造成卡顿
如果项目必须兼容老 iOS，contain 比 none 更稳妥：overscroll-behavior: contain 兼容 iOS 13+，能阻止事件冒泡但保留本层轻微弹性，不影响键盘唤起时的自动滚动定位。
为什么加了样式还是触发橡皮筋？先检查这三件事
即使 CSS 写对了，也可能因底层渲染条件未满足而失效。Safari 是否把某个元素识别为有效滚动上下文，取决于它是否创建了独立的滚动坐标系。重点排查：
- 滚动容器是否被父级
overflow: hidden或position: fixed阻断了事件冒泡路径 - 是否误用了
transform、filter、will-change等破坏合成层的属性 - 是否多个嵌套滚动容器共存（如
scroll-view套div），触发滚动权冲突，导致 WebKit 放弃对该容器的 overscroll 控制
最隐蔽的坑：某些 UI 库（如 Vant、NutUI）内部滚动区使用了 position: absolute + top: 0 的布局方式，这种结构下 overscroll-behavior 往往不生效，得手动找到其滚动内容容器并单独加样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
