overscroll-behavior 必须写在实际可滚动的子元素上才生效，如 .modal__scroller；写在 position: fixed 的 .modal 容器上无效，因其自身不可滚动。
overscroll-behavior 写在哪才真正生效
写在 .modal（position: fixed 容器）上基本无效——它本身不可滚动，浏览器直接忽略该属性。必须设在**实际可滚动的内容区**，比如 .modal__scroller 或 .popup-body 这类有明确高度、且设置了 overflow-y: auto 的子元素上。
常见错误包括：
- 给
body或html直接加overscroll-behavior: none→ 无滚动块，不触发 - 弹窗内容高度不足，没溢出 → 没滚动条，属性压根不介入
- 用 Flex 布局但父容器没设
min-height: 0或overflow: hidden→ 高度计算异常，滚动链断裂
contain 和 none 在响应式弹窗里怎么选
overscroll-behavior: contain 允许 iOS 弹性回弹、Android glow 效果，只阻断事件向上传播；overscroll-behavior: none 连本地反馈也禁掉，滚到顶/底就硬停。
响应式弹窗通常更适配 contain，原因如下：
- 移动端用户习惯在弹窗内“拉一下”确认到底了，
contain保留这个反馈，体验更自然 -
none在部分安卓 WebView 中可能意外抑制touchmove，导致拖拽卡顿 - 毛玻璃遮罩（
backdrop-filter）下用contain更安全：既锁住背景滚动，又不破坏遮罩自身轻微回弹
为什么加了还是穿透？iOS Safari 的典型陷阱
iOS Safari 15–16 对 overscroll-behavior 支持不稳定，尤其在以下场景会静默失效：
- 弹窗或任意祖先元素用了
transform、will-change或backface-visibility→ 创建新层叠上下文，滚动链识别失败 -
viewport设置了height=device-height或user-scalable=no→ 旧版 Safari 可能跳过 overscroll 控制 - 用
transform: translateZ(0)强制硬件加速 → 干扰滚动链，比contain失效还难排查
真机测试必不可少——模拟器常表现正常，但实际滚动时仍穿透。
响应式弹窗必须配套的 CSS 条件
overscroll-behavior 不控制“能不能滚动”，只干预“滚到头之后怎么办”。所以必须确保滚动容器满足以下全部条件：
- 有明确高度约束：如
max-height: 80vh、height: 400px或 Flex 容器中设flex: 1+min-height: 0 -
overflow-y: auto（或scroll），不能是visible或hidden - 内容真实溢出：子元素总高度 > 容器高度，否则无滚动条，属性不激活
- 避免祖先级干扰：检查 DOM 路径上是否有
transform、will-change等属性
最容易被忽略的是：它只响应「滚动到边界」那一瞬间，不是持续拦截。如果内容没溢出、容器没设 overflow、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
