滚动穿透指弹窗遮盖页面时底层仍可滚动，overscroll-behavior 是首选解法，因其不重置滚动位置、不触发重排、支持细粒度控制，需设在实际可滚动的内容区而非弹窗容器上。
移动端弹窗打开时，背后页面还能滚动，这是 overscroll-behavior 没设对，不是 JS 阻止默认事件没写好。
什么是滚动穿透，为什么 overscroll-behavior 是首选解法
滚动穿透指：弹窗（如 position: fixed 层）遮住页面后，用户手指在弹窗区域上下滑动，底层页面却跟着滚动。传统做法是给 body 加 overflow: hidden，但会丢失当前滚动位置、触发重排、iOS 上可能卡顿或闪屏。
overscroll-behavior 直接切断滚动事件向父级的传递，不干扰布局、不重置 scroll position，且支持 granular 控制（比如只禁掉 y 方向穿透）。
- 它作用于**滚动容器本身**，不是
body，所以不影响其他区域滚动 - 值为
none时，滚动到边界不会触发底层滚动、下拉刷新、回弹效果 - 兼容性已很好：Chrome 63+、Firefox 59+、Safari 16.4+（iOS 16.4+），旧版 Safari 需降级 fallback
如何给弹窗容器正确设置 overscroll-behavior
关键点：必须设在**实际可滚动的元素上**，不是弹窗 wrapper，而是内部有 overflow-y: auto 的内容区（比如 .modal__content）。
常见错误是直接写在 .modal（position: fixed 容器）上——它本身不可滚动，该属性无效。
- 确保弹窗内容区有明确高度和
overflow-y: auto或scroll - 在该内容区上加
overscroll-behavior: none - 如果弹窗允许内部滚动但禁止穿透，用
overscroll-behavior: contain（更严格，连回弹都禁） - 若只需禁 y 轴穿透（保留横向轮播等），写
overscroll-behavior-y: none
.modal__content {
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: none; /* ✅ 正确 */
}
遇到 iOS Safari 不生效怎么办
iOS 16.4 之前版本完全不支持 overscroll-behavior，此时需 fallback。但注意：不要一上来就给 body 加 overflow: hidden，那会破坏体验。
- 先检测支持性：
if ('overscrollBehavior' in document.documentElement.style) - 不支持时，仅在弹窗打开瞬间记录
document.body.scrollTop，再设body { position: fixed; top: -scrollTop }，关闭时还原 - 避免用
touchmove.preventDefault()，容易误杀内部滚动、影响 input 聚焦 - 某些 UI 库（如 Vue 的
Teleport弹窗）需确保样式作用域没被隔离掉
overscroll-behavior 和 scroll-behavior 别搞混
名字像，但完全无关：scroll-behavior 控制 scrollTo 或锚点跳转是否带动画；overscroll-behavior 只管「滚到边界的后续行为」。
一个常被忽略的细节：该属性对 iframe 也生效。如果弹窗里嵌了第三方 iframe，而你想让它能下拉刷新，就得在 iframe 上显式设 overscroll-behavior: auto，否则会被父级的 none 继承影响。
真正难处理的，是嵌套滚动场景——比如弹窗里有 tab 切换，每个 tab 内容又独立可滚动。这时得逐层检查每个可滚动容器是否都设置了合适的 overscroll-behavior 值，漏一层就可能穿透。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
