如何修复移动端Modal弹窗后的背景滚动穿透_通过CSS给body添加overflow: hidden或fixed-css教程-PHP中文网

应使用 position: fixed + inset: 0 替代 overflow: hidden 来锁定页面滚动，因其不重置滚动位置、兼容 ios 键盘收放，且关闭时可自然恢复；需提前缓存 documentelement.scrolltop 并在根布局统一管理样式以避免竞态。

如何修复移动端modal弹窗后的背景滚动穿透_通过css给body添加overflow: hidden或fixed

加 overflow: hidden 到 body 确实能禁掉背景滚动，但多数情况下会触发页面重置回顶部、iOS Safari 滚动卡顿、键盘弹起后无法恢复 —— 这不是“修好了”，只是掩盖了问题。

iOS Safari 对 body 的 overflow 变更极其敏感：一旦设为 hidden，它会立即丢弃当前滚动位置，并阻止后续任何 scrollTo 或 scrollTop 恢复；同时软键盘唤起时，fixed 元素可能错位，导致 Modal 内输入框被遮挡。

不推荐直接操作 body，尤其在 Vue/React 等框架中，body 不是组件生命周期的一部分，容易漏掉 cleanup
若必须用 overflow: hidden，务必在 Modal 关闭前先缓存 document.body.scrollTop，关闭后再 scrollTo(0, cachedY) —— 但 iOS 下仍可能失效
更稳妥的做法是改用 position: fixed + inset: 0 锁定 html 或根容器，而非 body

给 body 加 position: fixed 并设置 inset: 0（或 top: -${y}px），能真正冻结视觉滚动，且不干扰原生滚动行为。Modal 关闭时只需移除该样式，页面自然回到原位置。

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

打开 Modal 时：

document.body.style.position = 'fixed';
document.body.style.inset = '0';
document.body.style.overflow = 'hidden'; // 仅作兜底，非主逻辑

关闭 Modal 时：

document.body.style.position = '';
document.body.style.inset = '';
document.body.style.overflow = '';

注意：需提前记录 document.documentElement.scrollTop（非 body.scrollTop），因为 iOS 下 body.scrollTop 始终为 0

在组件 mounted 或 useEffect 里直接改 body 样式，极易导致 Modal 多次打开时样式叠加、关闭后未还原、SSR 渲染时报错（document is not defined）。

务必用 onMounted / useEffect 的 cleanup 函数清除样式，不能只依赖“关闭按钮点击”事件
服务端渲染场景下，所有 DOM 操作必须包裹在 if (typeof window !== 'undefined') 中
如果 Modal 是全局组件（如 <appmodal></appmodal>），建议用 provide/inject 或 context 传递锁屏状态，由根布局统一控制 body 样式，避免多个 Modal 竞态冲突

真正难的不是加一行 overflow: hidden，而是保证它在 iOS 键盘收放、快速开关、路由跳转、SSR 同构这些真实场景下不翻车 —— 所以优先考虑 position: fixed + inset，并始终把滚动位置缓存逻辑写在锁屏动作之前。