如何在JavaScript中打开Modal时禁止页面滚动？

你之前的问题核心是没正确保存body原本的滚动状态，直接设置overflow:hidden后没恢复到初始值，另外滚动条消失还会导致页面布局跳动。下面给你两种可靠的实现方案：

方法一：保存并恢复body的overflow状态 #

这种方法简单直接，核心是记录body原来的overflow值，打开Modal时设置为hidden，关闭时恢复，同时处理滚动条宽度避免布局跳动：

// 获取目标元素
const modal = document.getElementById('target-modal');
const openModalBtn = document.getElementById('open-btn');
const closeModalBtn = document.getElementById('close-btn');
let originalBodyOverflow; // 保存body原有的overflow状态

// 打开Modal逻辑
openModalBtn.addEventListener('click', () => {
  originalBodyOverflow = document.body.style.overflow;
  // 计算滚动条宽度，抵消页面跳动
  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
  
  document.body.style.overflow = 'hidden';
  document.body.style.paddingRight = `${scrollBarWidth}px`;
  modal.classList.add('show'); // 假设用类控制Modal显示/隐藏
});

// 关闭Modal逻辑
closeModalBtn.addEventListener('click', () => {
  document.body.style.overflow = originalBodyOverflow;
  document.body.style.paddingRight = '';
  modal.classList.remove('show');
});

方法二：用fixed固定body并恢复滚动位置 #

如果不想处理滚动条宽度的问题，可以用position:fixed把body固定住，同时记录当前滚动位置，关闭Modal时恢复到原来的位置，避免页面跳回顶部：

const modal = document.getElementById('target-modal');
const openModalBtn = document.getElementById('open-btn');
const closeModalBtn = document.getElementById('close-btn');

openModalBtn.addEventListener('click', () => {
  const scrollPosition = window.scrollY;
  // 把滚动位置存在body的data属性里
  document.body.dataset.scrollPos = scrollPosition;
  
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
  modal.classList.add('show');
});

closeModalBtn.addEventListener('click', () => {
  const scrollPosition = parseInt(document.body.dataset.scrollPos, 10);
  
  // 移除fixed样式
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  // 恢复之前的滚动位置
  window.scrollTo(0, scrollPosition);
  modal.classList.remove('show');
});

额外提示 #

• 如果你用React、Vue这类框架，原理完全一致，只需把Modal的显示状态和body样式绑定即可，比如在Vue的watch里监听Modal状态，动态修改body样式。
• 要是用第三方组件库的Modal，通常会自带禁止背景滚动的配置，先查组件文档有没有现成属性可以开启。

内容的提问来源于stack exchange，提问作者yus.rar