overscroll-behavior 必须设在真实可滚动的子元素上（如 .modal__content），且需满足：有高度约束、overflow-y: auto、内容真实溢出；contain 允许本地回弹，none 彻底禁用；iOS 15–16 需 JS 补漏并设 {passive: false}。
overscroll-behavior 要生效，必须写在**真实可滚动的元素上**，而不是弹窗容器本身；写错位置、没内容溢出、祖先用了 transform，都会导致它完全不工作——浏览器连 warning 都不报，静默忽略。
overscroll-behavior 必须设在真正可滚动的子元素上
比如弹窗里那个带 max-height 和 overflow-y: auto 的内容区（.modal__content 或 .overlay），而不是 .modal 这种 position: fixed 的壳子。后者通常没 overflow、没内容溢出，浏览器根本不把它当滚动容器，属性直接被丢弃。
- 该元素必须有明确高度约束：
max-height: 70vh或height: 400px，否则无法触发滚动条 - 必须启用纵向滚动：
overflow-y: auto（比scroll更推荐，避免空滚动条） - 内容得真实溢出——如果文字太少、列表项不足，根本滚不到边界，
overscroll-behavior就不会介入 - 毛玻璃遮罩场景下，
overscroll-behavior得加在遮罩层（如.overlay）上，不是加在内部的.glass-pane
contain 和 none 的实际区别是手感，不是防穿透能力
二者都阻断事件向上传播，但本地反馈完全不同：
-
overscroll-behavior: contain：允许当前元素自身弹性回弹（iOS 橡皮筋、Android glow），只切断冒泡 → 推荐作为弹窗默认值，键盘唤起后自动滚动也不受影响 -
overscroll-behavior: none：连本地回弹都禁掉，滚到顶/底就硬停 → 适合地图、画布等需彻底隔离的场景，但在轮播图里误用会导致横向滑动卡顿 - 只需防纵向穿透（比如轮播图里防误拖），用
overscroll-behavior-y: contain，横向保持默认行为
iOS 15–16 必须手动 JS 补漏，光靠 CSS 不够
哪怕样式全写对，在 iOS 15.x 和部分安卓 WebView 中仍可能穿透。JS 补位的关键点极易遗漏：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchmove时，必须用e.target.closest('.modal__content')判断是否在允许滚动的区域外滑动 - 绑定事件要加
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 不要无差别阻止所有
touchmove，否则遮罩层内可滚动区域（如长列表）会失灵 - 可先检测支持：
CSS.supports('overscroll-behavior', 'contain')，只对不支持的环境降级
真正容易被忽略的前提是：overscroll-behavior 不控制“能不能滚动”，只干预“滚到头之后怎么办”。如果滚动链被 transform 断开、内容没溢出、或者父容器在 Flex/Grid 布局中没设 min-height: 0，再怎么写 none 都只是摆设。
