fixed/absolute定位下模态框modal-overlay滚动失效问题求助

你的问题出在模态框内容的定位脱离了滚动容器的文档流，导致modal-overlay的滚动设置无法生效。以下是具体修复方案：

核心问题分析 #

• modal-overlay设置了overflow-y: scroll，但内部的modal-background用了position: fixed，完全脱离了overlay的文档流，overlay的滚动不会作用到它身上。
• 同时modal-overlay使用flex居中，当内容高度超过视口时，上下部分会被裁切掉，无法触发滚动行为。

修复后的CSS代码 #

.modal-overlay {
  z-index: 9999;
  opacity: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
  overflow-x: hidden;
  overflow-y: scroll;
  /* 移除flex居中，改用padding避免内容贴边 */
  padding: 20px 0;
}

.modal-backgroundparent {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 让父容器占满overlay宽度，确保内容水平居中 */
  width: 100%;
}

.modal-background {
  z-index: 10000;
  width: 350px;
  /* 把fixed改为relative，让内容留在overlay的文档流内 */
  position: relative;
  background: #fff;
  border-radius: 10px;
  /* 可选：限制模态框最大高度，内容过长时内部独立滚动 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

修复说明 #

1. 移除modal-overlay的flex相关居中属性，改用padding避免内容贴到屏幕边缘。
2. 将modal-background的position: fixed改为relative，让它处于modal-overlay的文档流中，使overlay的滚动能作用到内容上。
3. 给modal-background添加max-height和overflow-y: auto，当模态框自身内容过长时，内部可独立滚动，提升交互体验。
4. 保留modal-backgroundparent的flex布局，确保模态框在水平方向始终居中。

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