应使用 position: fixed + inset: 0 替代 overflow: hidden 来锁定页面滚动，因其不重置滚动位置、兼容 iOS 键盘收放，且关闭时可自然恢复；需提前缓存 documentElement.scrollTop 并在根布局统一管理样式以避免竞态。
加 overflow: hidden 到 body 确实能禁掉背景滚动，但多数情况下会触发页面重置回顶部、iOS Safari 滚动卡顿、键盘弹起后无法恢复 —— 这不是“修好了”，只是掩盖了问题。
为什么 overflow: hidden 在 iOS 上表现异常
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
推荐方案：用 position: fixed 替代 overflow: hidden
给 body 加 position: fixed 并设置 inset: 0（或 top: -${y}px），能真正冻结视觉滚动，且不干扰原生滚动行为。Modal 关闭时只需移除该样式，页面自然回到原位置。
- 打开 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
Vue/React 中的常见陷阱
在组件 mounted 或 useEffect 里直接改 body 样式，极易导致 Modal 多次打开时样式叠加、关闭后未还原、SSR 渲染时报错（document is not defined）。
立即学习“前端免费学习笔记（深入）”；
- 务必用
onMounted/useEffect的 cleanup 函数清除样式，不能只依赖“关闭按钮点击”事件 - 服务端渲染场景下，所有 DOM 操作必须包裹在
if (typeof window !== 'undefined')中 - 如果 Modal 是全局组件（如
<AppModal>），建议用 provide/inject 或 context 传递锁屏状态，由根布局统一控制body样式，避免多个 Modal 竞态冲突
真正难的不是加一行 overflow: hidden，而是保证它在 iOS 键盘收放、快速开关、路由跳转、SSR 同构这些真实场景下不翻车 —— 所以优先考虑 position: fixed + inset，并始终把滚动位置缓存逻辑写在锁屏动作之前。
