overscroll-behavior: none 无效的主因是设在了不可滚动的元素上，该属性仅对浏览器认定的滚动容器生效，需确保元素有溢出、overflow 设置及完整滚动链。
加了 overscroll-behavior: none 却没用，90% 是因为写在了不可滚动的元素上——它只对真正在滚动的容器生效，不是“看起来能滚”，而是浏览器认定它可滚动。
为什么 overscroll-behavior 写对了却完全不生效
这个属性只响应「滚动到边界」这一瞬间的行为，前提是：该元素必须是浏览器实际识别的滚动容器。常见失效原因包括：
- 给
.modal（position: fixed容器）直接设overscroll-behavior→ 它通常没overflow，属性被静默忽略 - 内容高度不足，没溢出 → 没滚动条，根本不会触发“滚到边界”的判断
- 父级或祖先用了
transform、will-change或backface-visibility→ iOS Safari（15–16）会破坏滚动链路识别 - Flex/Grid 布局中子元素撑高，但父容器没设
min-height: 0或overflow: hidden→ 高度计算异常，滚动行为不可控
overscroll-behavior: contain 和 none 怎么选
二者都阻断向上传播，区别只在本地反馈：
-
contain：允许 iOS 的弹性回弹、Android 的 glow 效果，仅切断事件冒泡 → 更适合弹窗内列表，保留原生手感 -
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 —— 它会创建新层叠上下文，干扰滚动链识别
真正容易被忽略的一点是：overscroll-behavior 不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果内容没溢出、容器没设 overflow、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
