CSS弹窗覆盖层：解决页面与弹窗高度超视口的滚动问题

要同时解决这两个问题，只需对CSS和少量JS（用于动态控制页面滚动）做以下调整：

核心修改点 #

• 阻止页面内容滚动：通过给body添加类来禁用滚动
• 让弹窗区域支持滚动：调整覆盖层的高度和溢出属性，同时限制弹窗的最大高度

修改后的完整代码 #

CSS

* {
  margin: 0;
}

/* 当弹窗显示时，禁用页面滚动 */
body.modal-open {
  overflow: hidden;
}

#overlay {
  height: 100vh; /* 强制覆盖层占满整个视口高度 */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: start;
  justify-content: center;
  overflow-y: auto; /* 当弹窗高度超过视口时，允许覆盖层滚动 */
}

#popup {
  margin: 50px;
  width: 300px;
  max-height: calc(100vh - 100px); /* 弹窗最大高度 = 视口高度 - 上下margin总和 */
  border: 1px solid red;
  background-color: blue;
  overflow-y: auto; /* 弹窗内部内容过多时，允许弹窗自身滚动 */
}

HTML

<div id="overlay">
  <div id="popup">
    <!-- 可添加大量测试内容验证滚动效果 -->
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
  </div>
</div>

<div id="content">
  <!-- 添加大量页面内容验证滚动锁定效果 -->
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
  <p>页面内容</p>
</div>

JS（动态控制弹窗显示/隐藏时的页面滚动）

const overlay = document.getElementById('overlay');
const body = document.body;

// 弹窗默认显示时，初始化添加禁用滚动类
body.classList.add('modal-open');

// 如需关闭弹窗恢复滚动，可添加如下逻辑：
// overlay.addEventListener('click', () => {
//   body.classList.remove('modal-open');
//   overlay.style.display = 'none';
// });

关键修改说明 #

1. 禁用页面滚动：通过body.modal-open { overflow: hidden; }，弹窗显示时给body添加该类，页面内容将无法滚动。
2. 覆盖层占满视口并支持滚动：将min-height: 100%改为height: 100vh，确保覆盖层始终占满当前视口高度；添加overflow-y: auto，当弹窗整体高度超过视口时，覆盖层会出现滚动条。
3. 限制弹窗最大高度并支持内部滚动：用max-height: calc(100vh - 100px)代替固定高度，确保弹窗不会超出视口（减去上下margin总和）；给弹窗添加overflow-y: auto，当弹窗内部内容过多时，弹窗自身会出现滚动条。

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