点击表格列弹出的div无法滚动问题求助

问题现象 #

点击表格列弹出的.overlay弹窗，内容高度超过设置的422px，但弹窗自身无法垂直滚动，页面其他滚动功能正常。

原代码片段 #

HTML结构 #

<div class='overlay'>
  <div class="container-vertical">
    <div class="point-vertical">
      <label class='noisy'>Noisy-le -Sec</label>
      <button class='button_veri_green'><img class='img_veri_green' src={veri_green}></img></button>
      <label class='gps'>93130, France | Type | Statut</label>
    </div>
    <div class="line-vertical"></div>
    <div class="point-vertical"><label class='noisy'>Noisy-le -Sec</label> <button class='button_veri_red'><img class='img_veri_green' src={veri_red}></img></button><label class='gps'>93130, France | Type | Statut</label> </div>
    <div class="line-vertical"></div>
    <div class="point-vertical"><label class='noisy'>Noisy-le -Sec</label> <label class='gps'>93130, France | Type | Statut</label> </div>
    <div class="line-vertical"></div>
    
    <div class="point-vertical"><button class='timer_btn'><img class='timer' src={timer}></img></button><label class='noisy'>Noisy-le -Sec</label><button class='x'><img class='img_veri_green' src={x}></img></button> <label class='gps'>93130, France | Type | Statut</label> </div>
    <div class="line-vertical"></div>
    <div class="point-vertical"><button class='question_mark_btn'><img class='question_mark' src={question_mark}></img></button> <label class='noisy'>Noisy-le -Sec</label> <label class='gps'>93130, France | Type | Statut</label> </div>

    <div class="dot-vertical"><img class='img-vertical' src={car_img} /></div>
  </div>
</div>

CSS样式 #

.overlay {
  position: fixed;
  width: 458px;
  height: 422px;
  top: 0;
  left: 0;
  background: #FFFFFF;
  overflow-y: auto;
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999; /* Set a high z-index value */
}

JS控制代码 #

const overlay = document.querySelector('.overlay');

const tdWithProgression = document.querySelectorAll('.progression');

tdWithProgression.forEach(td => {
  td.addEventListener('click', (event) => {
    event.stopPropagation(); 
    const tr = td.parentElement; 
    const rowIndex = tr.rowIndex;
    const trows = document.querySelectorAll('tr');
    trows[rowIndex].style.background = 'white';
    
    // Calculate the position relative to the viewport
    const viewportTop = window.scrollY || window.pageYOffset;
    const viewportLeft = window.scrollX || window.pageXOffset;
    const topset = viewportTop + 200; // Adjust the top position as needed
    const leftset = viewportLeft;

    overlay.style.display = 'block';
    overlay.style.top = topset + 'px'; 
    overlay.style.left = leftset + 'px';
  });
});

问题原因 #

1. 弹窗使用固定高度height:422px，但通过JS动态设置top值后，当top + height超过视口高度时，弹窗底部会超出视口，此时滚动事件会被页面整体捕获，而非弹窗自身。
2. 未限制弹窗的最大可视高度，导致内容超出视口后无法触发弹窗内部的滚动机制。

修复方案 #

1. 调整弹窗CSS，优化高度与定位 #

将固定高度改为基于视口的最大高度，确保弹窗始终在可视范围内，同时保留滚动属性：

.overlay {
  position: fixed;
  width: 458px;
  max-height: calc(100vh - 220px); /* 预留top的200px偏移 + 20px安全边距 */
  top: 200px;
  left: 0;
  background: #FFFFFF;
  overflow-y: auto;
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999;
}

2. 简化JS定位逻辑 #

固定定位本身基于视口，无需计算滚动偏移来设置top，直接使用CSS的固定值即可：

const overlay = document.querySelector('.overlay');
const tdWithProgression = document.querySelectorAll('.progression');

tdWithProgression.forEach(td => {
  td.addEventListener('click', (event) => {
    event.stopPropagation(); 
    const tr = td.parentElement; 
    const rowIndex = tr.rowIndex;
    const trows = document.querySelectorAll('tr');
    trows[rowIndex].style.background = 'white';
    
    overlay.style.display = 'block';
    overlay.style.left = `${window.scrollX || window.pageXOffset}px`;
    // 移除top的动态计算，改用CSS中设置的top:200px
  });
});

3. 可选：优化内容间距 #

给弹窗内部容器添加内边距，避免内容紧贴边缘，提升滚动体验：

.container-vertical {
  padding: 16px;
}

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