关闭Modal时页面轻微上移的问题排查与解决需求

安全阿岳

2026-7-17

问题分析

Chrome 和 Safari 中，给 html/body 设置 overflow: hidden 时，浏览器会自动隐藏滚动条，但页面内容会填充滚动条原本占据的宽度，导致页面布局出现微小偏移；同时关闭 Modal 恢复 overflow 时，滚动位置可能未被正确保留，最终表现为页面轻微上移。Firefox 对滚动条的处理逻辑不同，因此没有这个问题。

解决方案

核心思路是打开 Modal 时固定页面位置并保存滚动状态，关闭时精准恢复，避免滚动条变化和滚动位置丢失带来的偏移：

在显示 Modal 前，先记录当前页面的滚动距离，然后通过固定 body 位置的方式替代单纯设置 overflow: hidden，这样既禁止了滚动，又不会因为滚动条消失导致布局偏移：

// 保存当前滚动位置
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

// 锁定页面滚动
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.style.width = '100%';

关闭 Modal 时，先读取之前保存的滚动位置，移除锁定样式后，手动将页面滚动到原来的位置：

// 获取之前保存的滚动位置
const scrollTop = -parseInt(document.body.style.top);

// 移除页面锁定样式
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';

// 恢复到之前的滚动位置
window.scrollTo(0, scrollTop);