beforeunload弹窗本身不会导致滚动条消失，真正引发页面“抖动”或滚动条闪现/隐藏的是浏览器在弹窗触发时对body和html的overflow隐式重置，该行为不可控且跨浏览器不一致。
直接说结论：beforeunload 弹窗本身不会导致滚动条消失，真正让页面“抖一下”或滚动条闪现/隐藏的，是弹窗触发时浏览器自动对 document.body 和 document.documentElement 做的隐式 overflow 重置 —— 这个行为不可控，且在 Chrome/Firefox/Safari 上表现不一致。
为什么 beforeunload 一触发，页面就“跳”或“抖”？
这不是你代码写的，而是浏览器底层机制：当原生确认弹窗（那个灰色不可定制的“离开此页面？”框）弹出时，部分浏览器（尤其是 Chrome 115+）会临时将 body 的 overflow 设为 hidden，防止用户在弹窗期间滚动背景。弹窗关闭后，它又试图恢复，但若之前没显式设置过 overflow，恢复逻辑可能出错，导致：
-
html或body的overflow被设成auto或scroll，但内容高度没变，于是滚动条突然出现 - 滚动条宽度变化引发
100vw - 100%计算偏移，页面横向“抖动” - iOS Safari 下更明显：弹窗期间 body 滚动被冻结，关闭后 scrollTop 丢失，页面“啪”地跳回顶部
如何避免 beforeunload 触发时滚动条异常？
核心思路：别等浏览器乱动，你自己先锁死、再手动还原。重点不是阻止弹窗，而是接管 overflow 和 scroll 位置。
- 在注册
beforeunload监听前，先缓存当前document.body.style.overflow和document.documentElement.style.overflow的值 - 同时记录
window.pageYOffset（或scrollY），因为弹窗关闭后这个值大概率归零 - 在
beforeunload回调里不做任何 DOM 修改（它不允许异步操作），只返回字符串触发弹窗 - 关键一步：监听
window.onunload或window.onpagehide（注意不是unload事件本身，它不保证执行时机），在其中还原 overflow 并window.scrollTo(0, savedScrollTop) - 更稳妥的做法是：在弹窗触发前就提前加
document.body.style.overflow = 'hidden'+document.documentElement.style.overflow = 'hidden'，并用getComputedStyle判断是否已生效，避免浏览器后续覆盖
移动端特别要注意的坑
iOS 和部分安卓 WebView 在 beforeunload 弹窗期间，即使你设了 overflow: hidden，手指滑动仍可能穿透到背景页——这不是 bug，是 touch 事件未被拦截。
- 必须在弹窗触发前（比如用户点击退出按钮时）就加
document.body.addEventListener('touchmove', e => e.preventDefault(), { passive: false }) -
{ passive: false }必须显式写，否则 Safari 会忽略preventDefault() - 务必在
pagehide或visibilitychange（状态变为hidden）时移除该监听，否则整个页面再也滑不了 - 不要依赖
beforeunload的返回值做 UI 状态切换，它的执行时机太晚，且无法判断用户最终是否点了“离开”
最易被忽略的一点：beforeunload 的 scroll 锁定和 overflow 控制，和弹层（layer / modal）的滚动锁定是两套独立逻辑。你给弹层加了 overflow: hidden，不代表 beforeunload 就安全；反过来，修复了 beforeunload 的抖动，也不代表你的弹层不会滚动穿透。它们得各自处理，不能混为一谈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
