iOS Safari 中 body.style.overflow = 'hidden' 会跳顶，因 WebKit 重置 scrollY；应改用 position: fixed 钉住 html 并补偿 top 偏移，配合 touchmove 精准拦截与键盘场景处理。
直接设 body.style.overflow = 'hidden' 会跳顶，这不是 bug，是 iOS Safari 的固有行为——它会重置 window.scrollY 并强制滚动到 (0, 0)。真正能稳住位置的，是用 position: fixed 钉住 html 元素，并手动补偿偏移。
为什么 overflow: hidden 在 iOS 上必然跳顶
这不是样式没生效，而是 WebKit 对 overflow: hidden 的实现机制决定的：一旦 body 失去滚动能力，浏览器就“忘记”当前 scrollY 值，回滚到顶部。即使你提前记录了 window.scrollY，赋值回去也常因时机问题失败（比如 DOM 未 ready、CSS transition 未结束）。
-
document.body.style.overflow = 'hidden'在 iOS Safari 中被忽略或部分执行，不可靠 - 设了之后，
window.scrollY立即变为 0，且无法通过window.scrollTo()立即还原（尤其在弹窗刚打开时） - 若页面用了
transform或will-change，还可能触发渲染层重置，加剧跳动
用 position: fixed + top 偏移锁定真实位置
核心不是“禁滚动”，而是“把整个视口钉住”，让用户感知不到位置变化。必须同时操作 html 和 body，只动 body 不够。
- 打开弹窗前，先取
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop（双取值更稳） - 执行：
document.documentElement.style.position = 'fixed'，再设document.documentElement.style.top = `-${scrollTop}px` - 同时加
document.body.style.overflow = 'hidden'，防键盘唤起导致内容上顶 - 关闭时：恢复
document.documentElement.style.position = ''和document.body.style.overflow = ''，再调window.scrollTo(0, scrollTop) - 别漏掉
html { width: 100% }，否则position: fixed后宽度收缩，可能引发横向滚动条
touchmove 拦截必须精准且可撤销
仅靠 CSS 锁不住 iOS 的惯性滚动穿透，但无差别 preventDefault() 会干掉弹窗内所有滑动（比如轮播图、长列表），必须区分目标。
- 监听
touchmove时传{ passive: false }，否则 Safari 忽略preventDefault() - 只在
event.target.closest('.modal') === null时调event.preventDefault()（即触摸点不在弹窗内才拦截） - 绑定事件必须在弹窗 DOM 渲染完成后再执行（React/Vue 中建议用
useEffect(() => {}, [isOpen])或nextTick） - 关闭弹窗时务必
removeEventListener('touchmove', handler)，否则内存泄漏且后续页面滚动异常
iOS 键盘弹出导致“闪一下”或自动滚动
这是 WebKit 的硬伤：软键盘唤起时，浏览器会强行把聚焦元素滚动进可视区，哪怕你已锁住 html。CSS 和常规 JS 锁定挡不住这个行为。
- 给弹窗内
或加scrollIntoView({ block: 'nearest' })，避免触发全局滚动 - 键盘弹出瞬间（可用
focusin事件捕获），用setTimeout(() => window.scrollTo(0, scrollTop), 100)强制回位——iOS 下这个延迟很关键 - 如果弹窗含表单，优先用
position: fixed+top: env(safe-area-inset-top)把输入框固定在键盘上方，减少滚动需求
真正麻烦的不是“怎么锁”，而是“怎么精确解锁”：快速开关弹窗、中途手动滚动、键盘收放都会让 scrollTop 值错位。不要依赖单次记录，必要时可在 resize 或 orientationchange 事件中重新校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
