必须作用于真正可滚动的内容区（如.modal__content），而非.modal容器本身；因overscroll-behavior仅对overflow不为visible的元素生效，而.modal通常仅为position: fixed定位壳子，无滚动能力。
直接给弹窗里真正可滚动的内容区加 overscroll-behavior: contain，不是给弹窗容器本身加。 其他写法大概率失效，尤其在 iOS Safari 上。
为什么不能写在 .modal（fixed 容器）上
因为 .modal 本身通常没有 overflow，它只是个定位壳子，不是滚动容器。浏览器只对有 overflow: auto、scroll 或 overflow-y: auto 的元素应用 overscroll-behavior。
- 常见错误：
.modal { position: fixed; overscroll-behavior: none; }→ 属性不生效，毫无作用 - 正确位置：必须落在内部那个带
overflow-y: auto的内容块上，比如.modal__content - 如果内容区高度不足、没触发滚动条，该属性也不会介入——它只管“滚动到边界时”的行为，不管“滚不滚得动”
contain 和 none 到底选哪个
contain 是移动端弹窗的默认推荐值；none 更激进，会同时禁掉 iOS 的弹性回弹（橡皮筋效果），用户可能觉得“卡顿”或“反馈消失”。
-
overscroll-behavior: contain：允许内容区自己回弹，但滚动事件不传给背景页 —— 用户体验更自然 -
overscroll-behavior: none：连本地回弹都干掉，适合游戏画布、全屏编辑器等需要完全隔离的场景 - 只需禁 y 轴穿透（比如横向轮播图里防上下滑动穿透）：
overscroll-behavior-y: contain
iOS Safari 15–16 的典型失效原因
即使写对了选择器和值，在旧版 iOS Safari 中仍可能白忙活。关键干扰项是层叠上下文和 viewport 配置。
- 父级或祖先元素用了
transform、will-change或backface-visibility→ 会创建新层叠上下文，间接破坏滚动链路判断 -
<meta name="viewport" content="height=device-height">或user-scalable=no→ 部分 Safari 版本会忽略overscroll-behavior - Flex/Grid 容器里子元素撑高溢出：记得给父容器加
min-height: 0或overflow: hidden，否则滚动行为不可控
最易被忽略的一点：这个属性不解决“弹窗打开后背景还能滚”的问题——它只管“正在滚动的容器滚到头之后”的行为。如果背景页还在动，说明你根本没在正确的滚动容器上设它，或者那个容器压根没滚动能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
