仅靠 backdrop-filter 无法阻止背景滚动，必须在遮罩容器（如 .overlay 或 dialog）上设置 overscroll-behavior: contain 并确保其可滚动；同时需配合 body overflow: hidden 等措施防其他滚动干扰。
毛玻璃遮罩下滚动时背景还在动？用 overscroll-behavior 锁住它
直接结论：仅靠 backdrop-filter: blur() 做毛玻璃遮罩，**无法阻止背后页面滚动**；必须配合 overscroll-behavior: contain（或 none）作用于遮罩容器本身，才能真正“锁住”背景滚动。否则用户在遮罩内滚到底再继续拖，会触发背后页面的滚动（即“滚动穿透”），体验断裂。
overscroll-behavior 该加在谁身上？不是弹窗内容，而是遮罩容器
常见错误是把 overscroll-behavior 加在弹窗内部的 .modal-content 或滚动区域上——这没用。它必须作用于**能触发 overscroll 的那个可滚动容器本身**，也就是毛玻璃遮罩层（通常是全屏 div.overlay 或 dialog 元素）。
典型结构如下：
<div class="overlay" style="overscroll-behavior: contain;">
<div class="glass-pane" style="backdrop-filter: blur(12px);">
<div class="modal-content">...</div>
</div>
</div>
-
.overlay需设overflow: auto或scroll（否则无滚动能力，overscroll-behavior不生效） -
.glass-pane只负责视觉毛玻璃，不参与滚动控制 - 若用原生
<dialog></dialog>，需注意其默认overscroll-behavior是auto，仍需显式设为contain
为什么 contain 而不是 none？
overscroll-behavior: none 会完全禁用 overscroll 效果（比如 iOS 下的弹性回弹、Android 的滚动溢出光晕），而 contain 只阻止**向父级传播**，保留当前容器自身的 overscroll 行为，更符合遮罩交互直觉。
- 用户在遮罩内滚到顶/底时，看到的是遮罩自身轻微回弹，而非背后页面突然跳动
-
none在部分安卓 WebView 中可能意外抑制 touchmove 事件，导致拖拽卡顿 - 兼容性上两者一致（Chrome 63+/Firefox 59+/Safari 16.4+），但
contain更安全
还要防住那些“偷偷滚动”的地方
overscroll-behavior 解决的是“滚动穿透”，但遮罩激活时，背后页面仍可能因焦点切换、键盘唤起或 JS 主动调用 scrollTo 而跳动。必须同步处理：
- 遮罩显示时，给
加overflow: hidden（注意记录原始scrollTop，关闭时恢复） - 避免遮罩内元素获得焦点后触发
scrollIntoView—— 可对遮罩内所有可聚焦元素加scroll-margin: 0 - Safari 16.4 之前不支持
overscroll-behavior，需降级用touchmove+preventDefault()拦截（仅针对 iOS）
毛玻璃和滚动锁定是两个正交问题：一个管视觉，一个管行为。只做一半，用户手指一滑就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
