overscroll-behavior 只在可滚动容器（overflow 非 visible）上生效，若容器未溢出、未设滚动属性或受 transform 干扰，则失效；contain 保留本地回弹，none 彻底禁用；需作用于实际滚动区并兼容 ios 旧版。
overscroll-behavior 能直接阻断滚动事件向父级传递，但**只在可滚动容器上生效**——给 body 或模态框外层 wrapper 加它，基本等于没写。
为什么加了 overscroll-behavior: none 却没用
常见失效原因不是属性写错，而是容器根本不满足生效前提：
- 目标元素没有设置
overflow-y: auto、overflow: scroll等非visible值 → 属性被浏览器忽略 - 模态框本身是
position: fixed，但内部内容区（如.modal__content）没设高度限制 → 内容不溢出，无法触发滚动，自然不触发边界行为 - 父级或祖先元素用了
transform、will-change或backface-visibility→ iOS Safari（15–16）会破坏滚动链路判断，导致属性失效 - 在 flex / grid 布局中，子容器未设
min-height: 0或overflow: hidden→ 高度计算异常，滚动行为不可控
overscroll-behavior: contain 和 none 怎么选
二者都阻止穿透，但对本地滚动反馈的处理不同：
-
contain：允许内部弹性回弹（比如 iOS 的“橡皮筋”效果），仅切断向上传播 → 更适合弹窗内列表，保留原生手感 -
none：连本地回弹也禁掉，边界处完全“硬停” → 适合游戏面板、地图容器等需要彻底隔离的场景 - 别用
auto：这是默认值，就是你正在被穿透的那个状态
移动端 Safari 兼容性要兜底
iOS 16.4+ 支持稳定，但旧版（尤其是 15.x）仍有概率失效。不能只靠 CSS：
- 优先确保
overscroll-behavior设在**实际可滚动的内容区**，例如：.modal__scroller { overflow-y: auto; overscroll-behavior: contain; } - 若仍穿透，配合传统降级：弹窗打开时临时加
body { position: fixed; top: -${window.scrollY}px; }，关闭时还原 - 避免在模态框层级使用
transform: translateZ(0)类 hack —— 它会创建新层叠上下文，干扰滚动链识别
真正容易被忽略的点是：这个属性不作用于“是否能滚动”，而只干预“滚到头之后怎么办”。如果内容根本没溢出、容器不可滚动、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
