overscroll-behavior 写在 body 或 html 上无效，因浏览器底层锁定根元素的 overscroll 行为；必须作用于实际可滚动的非根容器（如 .modal__content），且该容器需满足：有显式高度、overflow-y: auto、内容真实溢出；iOS 15 及以下需 JS 降级处理，但不可全局 preventDefault()。
直接写在 body 或 html 上完全无效，这是 90% 的人第一次踩坑的位置。 它只对实际发生滚动的子容器起作用，且必须同时满足三个硬性条件：显式设置 overflow-y: auto（或 scroll）、有明确高度（如 height: 80vh）、内容真实超出该高度。
为什么 overscroll-behavior 写在 body 上没反应
iOS Safari 和 Chrome 都会忽略 body 或 html 元素上的该声明——开发者工具里看到属性变灰、computed 样式不生效，不是你写错了，是浏览器压根不读。根元素的 overscroll 行为由 WebView 底层锁定，CSS 无权干预。
真正起效的必须是「实际可滚动的非根容器」，比如：
-
.modal__content（弹窗内长列表） -
#chat-list（聊天消息流） -
.article-body（长文内容区）
这些容器必须自己能滚动，而不是靠父级“带”着动。
立即学习“前端免费学习笔记（深入）”；
overscroll-behavior-y: contain vs none 怎么选
绝大多数嵌套滚动场景下，contain 是更安全的选择；none 太激进，容易破坏预期行为。
-
contain：允许本层触顶/底时保留轻微弹性（比如弹窗内列表拉到底仍有回弹），但阻止事件向上冒泡 → 不影响键盘唤起时输入框自动滚动定位，也不触发背景页下拉刷新 -
none：彻底禁用本层所有 overscroll 反馈（包括 iOS 下拉提示、弹性动画），还禁止传播 → 适合全屏遮罩、游戏画布等强隔离场景，但可能让依赖scroll事件的下拉刷新库失效 - 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto
加了还是触发橡皮筋？先检查这三件事
即使样式写对了，也可能因底层渲染条件未满足而失效。Safari 是否把某个元素识别为有效滚动上下文，取决于它是否创建了独立的滚动坐标系——这不光看 CSS，还受布局属性影响。
- 容器或任意祖先用了
transform（如translateZ(0)）、will-change: transform或contain: paint→ 渲染层被隔离，overscroll-behavior失效 - 父级是
position: fixed，但子滚动容器没设显式高度 → Safari 可能跳过滚动链控制逻辑 - 嵌套结构中只在外层设了
contain，但内层列表（如.chat-list）没显式声明 → 滚动穿透仍会发生
iOS 15 及以下必须 JS 补位，但不能全局 preventDefault()
iOS 16.4+ 才原生支持 overscroll-behavior，旧版必须降级处理，但方式很关键：
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 降级时只拦截非目标区域：
touchmove中用e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal-scroll） - 监听器必须传
{ passive: false }，否则preventDefault()在 iOS 14+ 和 Chrome 中会被忽略 - 绝对不要给
document或body绑定全局preventDefault()，否则锁死所有内部滚动
最常被忽略的是：即使你写了 overscroll-behavior，只要容器没形成独立滚动上下文（比如被 transform 或 fixed 父级干扰），它就只是个摆设——这时候看 computed 样式，属性会显示为灰色禁用状态，不是 bug，是 Safari 明确拒绝了这个上下文。
