当div出现时我无法向下滚动

Question

当我点击表格上的列时，它会显示一个包含一些信息的 div ，该 div 有点长，高度超过 400px，这就是为什么我需要向下滚动才能看到全部内容，但不幸的是我不能，即使它超过了网页的高度，但仍然没有发生任何事情，就像它不存在一样，水平和垂直滚动条与表格配合良好，但与 div 配合不好。 这是 div 的 html 。 :

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

我尝试添加owerflow-y:auto或owerflow:auto，但不起作用，我还尝试使垂直滚动始终显示在页面中，但也不适用于div。

Answer 1

您似乎面临一个问题，即当

.overlay

div 的高度超过可用空间时，其内容不会滚动。为了确保覆盖层内的内容可以正确滚动，您应该为

.overlay

容器设置固定高度，然后在必要时应用

overflow-y: auto

启用垂直滚动。以下是调整 CSS 的方法：

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

在此 CSS 代码段中，

max-height

设置为

422px

，这是您想要的

.overlay

容器的最大高度。当里面的内容超过这个高度时，

.overlay

容器内会出现一个垂直滚动条，允许用户向下滚动查看额外的内容。

确保根据需要调整

max-height

值以适应您的内容，而不会导致覆盖层超出视口太远。

Answer 2

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';

    // Show the overlay
    overlay.style.display = 'block';
  });
});

// Close the overlay when clicking inside it or outside it
document.addEventListener('click', (event) => {
  if (overlay.style.display === 'block') {
    overlay.style.display = 'none';
  }
});

// Prevent clicks inside the overlay from closing it
overlay.addEventListener('click', (event) => {
  event.stopPropagation();
});

// Close the overlay when clicking the "Close Overlay" button
const closeButton = document.querySelector('.close-overlay');
closeButton.addEventListener('click', () => {
  overlay.style.display = 'none';
});

/* Add your existing CSS styles */
.overlay {
  display: none;
  position: fixed;
  width: 458px;
  height: 422px;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  overflow-y: auto;
  box-shadow: 0px 3px 6px #1F1F1F29;
  z-index: 999;
}

.overlay-content {
  /* Add styling for the content within the overlay */
  padding: 20px; /* Adjust as needed */
}

<table>
  <tr>
    <td class="progression">Column 1</td>
    <td class="progression">Column 2</td>
  </tr>
</table>

<div class="overlay">
  <div class="overlay-content">
    <h2>Overlay Content</h2>
    <p>This is some sample content inside the overlay.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <button class="close-overlay">Close Overlay</button>
  </div>
</div>