弹窗打开时如何禁止页面滚动？尝试overflow:hidden未生效

当前点击「more info」按钮打开弹窗后，页面背景仍可滚动，使用CSS overflow:hidden 属性无效时，可以通过CSS+JavaScript结合的方式彻底解决这个问题，具体方案如下：

核心思路 #

单纯设置 body { overflow:hidden } 在部分浏览器（尤其是移动端）可能因为原生滚动机制失效，需要通过固定body位置配合滚动位置记录的方式，实现弹窗显示期间禁止背景滚动，关闭后恢复原滚动位置。

实现代码 #

CSS 部分 #

/* 禁止滚动的body类 */
.no-scroll {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  top: var(--scroll-top, 0);
}

/* 弹窗基础样式（示例） */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: #fff;
  z-index: 999;
}

JavaScript 部分 #

// 获取相关DOM元素
const moreInfoBtn = document.querySelector('.more-info-btn');
const popup = document.querySelector('.popup');
const closePopupBtn = popup.querySelector('.close-btn');

// 打开弹窗时的处理
moreInfoBtn.addEventListener('click', () => {
  // 记录当前页面滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 通过CSS变量保存滚动位置，用于恢复
  document.body.style.setProperty('--scroll-top', `-${scrollTop}px`);
  // 给body添加禁止滚动类
  document.body.classList.add('no-scroll');
  // 显示弹窗
  popup.style.display = 'block';
});

// 关闭弹窗时的处理
closePopupBtn.addEventListener('click', () => {
  // 移除禁止滚动类
  document.body.classList.remove('no-scroll');
  // 恢复之前的滚动位置
  const scrollTop = parseInt(document.body.style.getPropertyValue('--scroll-top')) * -1;
  window.scrollTo(0, scrollTop);
  // 隐藏弹窗
  popup.style.display = 'none';
});

方案说明 #

1. position: fixed 会将body固定在视口，彻底阻止背景滚动，配合 width:100% 避免页面宽度塌陷
2. CSS变量 --scroll-top 用于记录弹窗打开前的滚动位置，关闭时通过 window.scrollTo 恢复，避免页面跳转到顶部
3. !important 用于确保禁止滚动的样式优先级高于body的其他默认样式

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