应优先用 class 控制 body 滚动，定义 .no-scroll { overflow: hidden !important; } 并动态添加；移动端需绑定 document touchmove 事件并 preventDefault；遮罩关闭前需缓存并恢复 scrollTop；避免仅依赖 position: fixed 遮罩层。
遮罩层开启时 body 滚动没禁掉？检查是否被内联样式或更高优先级规则覆盖
直接给 body 加 overflow: hidden 看似简单，但常因 CSS 优先级问题失效。比如某些 UI 框架（如 Ant Design、Element Plus）会在组件挂载时给 body 加内联 style="overflow: auto"，或你自己的全局样式里写了 body { overflow: visible !important }，都会让 JS 设置的 class 或 style 被忽略。
实操建议：
- 优先用 class 控制，而非直接操作
style属性：定义.no-scroll { overflow: hidden !important; }，再用document.body.classList.add('no-scroll') - 确保该 class 在所有其他影响
body的样式之后加载（检查 CSS 文件顺序或<style></style>标签位置） - 开启遮罩后，手动在浏览器开发者工具中选中
，看 computed styles 里overflow最终值是否为hidden，而不是被标记为overridden
移动端 Safari 滚动穿透依然存在？需要额外处理 touchmove 默认行为
iOS Safari 对 overflow: hidden 的支持不完整——即使 body 被锁住，用户手指在遮罩层外区域（比如侧边空白）拖动，仍可能触发底层页面滚动。这不是 bug，是 Safari 的滚动优化机制：它会把未阻止 touchmove 的事件向上冒泡到可滚动容器。
实操建议：
- 在遮罩层显示时，绑定一次性的
touchmove事件到document，并调用event.preventDefault()：
const preventTouchMove = (e) => e.preventDefault();
if (isModalOpen) {
document.addEventListener('touchmove', preventTouchMove, { passive: false });
} else {
document.removeEventListener('touchmove', preventTouchMove);
}
- 务必设置
{ passive: false }，否则preventDefault()在现代 Chrome/Safari 中会被忽略 - 别对
body绑定，而要对document——因为 iOS 可能将 touch 事件派发到 document 层级
遮罩关闭后页面卡在顶部？记得恢复 scroll position
加 overflow: hidden 不会影响当前滚动位置，但某些场景下（比如路由跳转后弹遮罩、或遮罩由 position: fixed 元素实现），关闭时直接移除 class 会导致页面“闪回”到顶部——本质是浏览器在 overflow: hidden 期间悄悄重置了 scrollTop。
实操建议：
- 开启遮罩前先缓存
document.documentElement.scrollTop || document.body.scrollTop - 关闭遮罩、移除
no-scrollclass 后，立即用window.scrollTo(0, savedScrollTop)恢复位置 - 如果使用 React/Vue，注意不要在 unmount 阶段才恢复 scroll——应在遮罩隐藏动画开始前就执行
用 position: fixed 遮罩层替代 body 锁定？小心 z-index 和 transform 干扰
有些团队选择不用 body 锁定，而是把遮罩层设为 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;。这看似绕过滚动问题，但实际埋坑更多：
- 若遮罩层父容器有
transform、perspective或filter，会创建新的 stacking context，导致z-index失效，遮罩可能被底层内容盖住 -
100vh在移动端 Safari 中不等于视口高度（地址栏收起/展开会改变），导致遮罩无法完全覆盖，露出底部可滚动区域 - 必须显式设置
overscroll-behavior: none到遮罩层本身，否则 iOS 下滑动遮罩边缘仍会触发底层滚动
除非有强理由（比如需要独立滚动的遮罩内容），否则老实用 body + overflow: hidden 更可控。
真正麻烦的从来不是加一行 overflow: hidden，而是各种浏览器对“隐藏滚动”的解释不一致，加上 touch 行为、scroll 恢复、stacking context 这些隐性依赖。动手前先打开真机调试，别只信桌面 Chrome 的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
