固定模态框超出视口时无法滚动的问题排查

问题回顾 #

你制作了一个固定定位的模态框用来覆盖页面主内容，但当模态框里的内容高度超过视口时，滚动功能没法正常工作。这个模态框的结构分为两部分：

• 一个灰色的overlay背景div，占满整个模态框的宽高
• 高度可能超出视口的内容区域

问题原因 #

通常这种滚动失效的问题，是因为没有给内容区域正确设置高度限制和溢出属性，或者背景层的布局导致内容区域无法正确触发滚动。比如如果内容区域没有设置max-height，或者父容器的高度没有限制，就会导致内容直接撑破模态框，而不会出现滚动条。

修复方案 #

下面是经过调整的代码，能让模态框内容超出视口时正常滚动：

HTML结构 #

<div class="modal-overlay">
  <div class="modal-content">
    <!-- 这里放你的超长内容 -->
    <p>测试内容</p>
    <p>测试内容</p>
    <!-- 重复足够多的行来模拟超长内容 -->
  </div>
</div>

CSS样式 #

/* 背景覆盖层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  /* 使用flex布局来居中内容，同时避免内容过长时顶部被截断 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 0;
  box-sizing: border-box;
}

/* 内容容器 */
.modal-content {
  background-color: #fff;
  width: 80%;
  max-width: 600px;
  /* 限制内容容器的最大高度，减去覆盖层的上下padding */
  max-height: calc(100vh - 4rem);
  /* 内容超出时显示垂直滚动条 */
  overflow-y: auto;
  padding: 1.5rem;
  box-sizing: border-box;
  border-radius: 8px;
}

关键调整点 #

1. 给背景覆盖层设置height: 100vh，确保它完全覆盖视口，同时用flex布局来控制内容区域的位置，避免内容过长时顶部被视口截断。
2. 给内容容器设置max-height，用calc(100vh - 4rem)来减去覆盖层的上下内边距，保证内容容器不会超出视口范围。
3. 给内容容器添加overflow-y: auto，当内容高度超过max-height时，自动显示垂直滚动条。
4. 避免给内容容器设置height: 100%，否则内容会直接撑满父容器，无法触发滚动。

这样修改后，当模态框内容超过视口高度时，内容区域就能正常滚动，同时背景层会一直固定覆盖整个页面。

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