overscroll-behavior: contain 仅对满足三条件的滚动容器生效：有可滚动的 overflow 值、内容真实溢出、在未被 transform 等中断的滚动链中；否则静默失效。
直接结论：只写 overscroll-behavior: contain 不够，90% 的失效是因为它被加在了“不能滚动”的元素上。
为什么 overscroll-behavior 写了却完全没反应
这个属性不报错、不警告，写错就等于没写。它只对浏览器认定的「滚动容器」生效，不是“看起来能滚”，而是必须满足三个硬条件：
- 元素自身有
overflow-y: auto（或scroll）、overflow-x: auto等可触发滚动的overflow值 - 内容真实溢出容器（比如子元素总高度 > 容器
max-height或height）→ 否则连滚动条都不会出现，更不会触发“滚到边界” - 该元素在滚动链中是“活跃节点”：祖先不能含
transform、will-change、backface-visibility—— 尤其 iOS Safari 15–16 会因此断开识别
常见翻车现场：.modal { position: fixed; overscroll-behavior: contain; } → .modal 本身不可滚动，属性被静默忽略。
contain 和 none 到底该用哪个
二者都阻断向上传播，但本地反馈差异极大，选错会导致体验断层：
-
overscroll-behavior: contain：允许当前容器自身弹性回弹（iOS 橡皮筋、Android glow），仅阻止事件向父级传递 → 推荐作为默认选择，尤其用于模态框内列表、聊天窗口、侧边栏菜单 -
overscroll-behavior: none：连本地回弹也禁掉，滚到顶/底就硬停 → 只适合地图容器、全屏画布、自定义下拉刷新等需彻底隔离的场景；在部分安卓 WebView 中还可能意外抑制touchmove，导致拖拽卡顿 -
overscroll-behavior: auto就是默认值，等于你正在被穿透的那个状态，别用
横向轮播 + 纵向防穿透？直接写 overscroll-behavior-y: contain; overscroll-behavior-x: auto。
移动端 Safari 兼容性必须兜底
iOS 16.4+ 支持稳定，但旧版（尤其是 15.x）仍常失效，且不报任何提示：
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 若不支持，传统降级不能简单给
body加position: fixed—— 要记录当前window.scrollY，再设body { top: -${scrollY}px; position: fixed; width: 100%; }，关闭时还原 - 避免在模态框层级使用
transform: translateZ(0)类 hack —— 它会创建新层叠上下文，干扰滚动链识别 - 毛玻璃遮罩场景中，
overscroll-behavior必须加在.overlay（实际滚动容器）上，而不是.glass-pane（纯视觉层）
真正容易被忽略的一点是：overscroll-behavior 不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果容器没设 overflow、内容没溢出、或者滚动链被 transform 断开，再怎么写 contain 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
