如何消除overflow:hidden导致的模态框页面抖动问题？

一、修复滚动条消失导致的抖动问题 #

抖动的核心原因是：浏览器滚动条有固定宽度，当你把body的overflow设为hidden时，滚动条消失，页面可用宽度突然增加，导致页面整体右移。解决思路是提前计算滚动条宽度，在隐藏滚动条时给body添加对应宽度的内边距/外边距，抵消宽度变化。

实现代码（JS直接操作样式） #

// 计算当前浏览器滚动条的宽度
function getScrollbarWidth() {
  return window.innerWidth - document.documentElement.clientWidth;
}

function hidden() {
  const scrollbarWidth = getScrollbarWidth();
  document.body.style.overflow = 'hidden';
  // 用padding-right抵消滚动条消失带来的宽度变化
  document.body.style.paddingRight = `${scrollbarWidth}px`;
}

function show() {
  document.body.style.overflow = 'auto';
  // 重置内边距
  document.body.style.paddingRight = '';
}

实现代码（CSS类+CSS变量，更易维护） #

先在CSS中定义类：

.body-no-scroll {
  overflow: hidden;
  padding-right: var(--scrollbar-width);
}

然后在JS中初始化滚动条宽度并切换类：

// 页面加载时计算滚动条宽度，赋值给CSS变量
document.documentElement.style.setProperty('--scrollbar-width', `${window.innerWidth - document.documentElement.clientWidth}px`);

function hidden() {
  document.body.classList.add('body-no-scroll');
}

function show() {
  document.body.classList.remove('body-no-scroll');
}

二、其他禁用页面滚动的可行方案 #

如果不想处理滚动条宽度的问题，也可以用以下两种方案：

方案1：给body设置position:fixed #

这种方式直接让body固定在视口内，彻底禁用滚动，同时不会有滚动条抖动问题，但需要记录滚动位置，避免关闭模态框后页面回到顶部。

let savedScrollTop = 0;

function hidden() {
  // 记录当前滚动位置
  savedScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${savedScrollTop}px`;
  document.body.style.width = '100%';
}

function show() {
  document.body.style.position = '';
  document.body.style.top = '';
  // 恢复之前的滚动位置
  window.scrollTo(0, savedScrollTop);
}

方案2：阻止滚动事件的默认行为 #

通过监听wheel（鼠标滚轮）和touchmove（触摸滑动）事件，阻止默认滚动行为。这种方式适合需要保留滚动条但禁用滚动的场景，但要注意给模态框内部的滚动元素留例外。

function preventScroll(e) {
  // 可添加判断：如果事件触发元素在模态框内，则不阻止滚动
  // if (e.target.closest('.modal')) return;
  e.preventDefault();
}

function hidden() {
  // 监听并阻止滚动事件，passive设为false才能生效preventDefault
  document.addEventListener('wheel', preventScroll, { passive: false });
  document.addEventListener('touchmove', preventScroll, { passive: false });
}

function show() {
  // 移除监听，恢复滚动
  document.removeEventListener('wheel', preventScroll);
  document.removeEventListener('touchmove', preventScroll);
}

内容的提问来源于stack exchange，提问作者Dylan