const y = window.scrollY;
document.body.style.position = 'fixed';
document.body.style.top = `-${y}px`;
iOS 上弹窗打开后手指滑动背景页面跟着滚,给 body 加 overflow hidden 后页面直接跳到顶部,关闭弹窗位置也回不去,安卓机上却复现不了。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,iOS Safari 对 body overflow 支持不完整,锁 body 会重置滚动位置,背景滚动并没有真正被拦住,桌面浏览器根本测不出来,换台安卓机就正常,别在桌面上验证。
这次卡住的地方就在「iOS 滚动穿透」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
处理上按这个顺序:锁 html 和 body 的同时记录当前 scrollTop,关闭时按它还原;弹窗内容放到单独容器里,让它在内部滚动,别让背景跟着动;关闭弹窗时按记录的位置恢复原来的滚动,不要直接跳回顶部。
改完只确认一件事:弹窗打开背景不再滚动,关闭后页面停在原来的位置,不会跳顶。
