overscroll-behavior 不能阻止弹窗弹出时背景滚动，仅控制滚动到边界后的弹性穿透；需作用于真实可滚动的内部容器（如 .popup-content），并满足 max-height、overflow-y: auto 及内容溢出条件。
直接说结论：overscroll-behavior 本身**不能阻止弹窗弹出时背景的正常滚动**，它只管“滚动到边界后继续拖拽”的那一下弹性穿透（overscroll），不是锁屏开关。想靠一行 CSS 就让背景彻底不动，会踩坑。
为什么 overscroll-behavior: contain 写在弹窗根元素上没用
常见错误是给 .modal（position: fixed 容器）加 overscroll-behavior: contain —— 浏览器直接忽略，因为该元素本身不可滚动（没设 overflow-y、没内容溢出、没明确高度）。overscroll-behavior 只对「真实可滚动的子容器」生效，比如 .modal__body 或 .popup-content。
- 必须同时满足：有
max-height（或height）、overflow-y: auto、内容实际超出高度 - 若弹窗内容很短，没触发滚动，这个属性就是摆设
- iOS Safari 对
html和body上的该属性完全不解析，computed 样式里显示为灰色禁用
真正该加 overscroll-behavior 的位置和写法
它要加在弹窗内部那个「负责滚动的容器」上，且必须配合滚动上下文条件：
- 推荐写法：
.popup-content { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior-y: contain; } - 如果弹窗里嵌了
el-table、scroll-view或自定义列表，它们的 wrapper 也得单独加，不能只靠外层 - uni-app 中需穿透到
::deep(.uni-scroll-view-content)；小程序同理，作用于scroll-view渲染后的内部节点 - 双轴控制更安全：
overscroll-behavior-y: contain; overscroll-behavior-x: auto，避免误锁横向轮播
为什么加了 still 滚到底背景还在动？三个常漏检查点
即使样式写对，也可能因底层渲染未满足滚动坐标系创建条件而失效：
立即学习“前端免费学习笔记（深入）”；
- 父级用了
transform: translate()居中，但没把max-height和overflow加在 transform 容器上 → 滚动上下文被切断 -
body或html被设了height: 100% + overflow: hidden→ 滚动事件被吞掉，子元素滚动无法建立独立 scroll chain - iOS 键盘弹出导致
vh重算，max-height: 80vh突然变小，内容被截断、滚动区域消失 →overscroll-behavior失效
最麻烦的其实是兼容性：iOS 16.4 之前版本压根不识别这个属性，JS 补位又不能无差别 preventDefault。真正在意体验的项目，得把「哪个元素在滚」「它是否真可滚」「祖先有没有参与 scroll chain」全用 getComputedStyle 和 element.scrollHeight > element.clientHeight 实时校验一遍。否则，CSS 写得再漂亮，手指一划，背景照旧跟着跑。
