bbs-go-site

我试图将弹出框放置在长菜单且可滚动的侧菜单中。在用户滚动菜单后，我很难使弹出窗口显示在正确的位置。

Here is a demo fiddle of my problem.

在侧面菜单中，有几个部分，每个部分都有自己的按钮以显示弹出窗口，并且弹出窗口应位于该部分内。

我知道，如果我可以将弹出窗口简单地放置在HTML本身部分中并将其放置在父窗口中，那么将很容易做到这一点，但是我无法重组HTML以将弹出窗口包括在该部分自身中。

我的问题是弹出窗口5和6如何不在其关联的部分中打开。

这是代码。如您所见，如果尚未滚动侧面菜单，则弹出窗口的效果就很好，但是，如果滚动侧面菜单然后打开弹出窗口5或6，您会发现它们在我的菜单容器之外的显示方式太低了：

var togglePopover = function (popoverId, sectionId) {
  // Removing any existing popovers
  document.querySelectorAll('.popover').forEach((p) => p.classList.add('hidden'));

  var popoverToToggle = document.getElementById(popoverId);
  var sectionToPlacePopover = document.getElementById(sectionId);

  popoverToToggle.style.top = sectionToPlacePopover.offsetTop + sectionToPlacePopover.scrollTop + 'px';
  popoverToToggle.classList.remove('hidden')
}

.container { 
  background-color: #FFFFF0;
  margin-top: 50px;
  border: 2px solid black;
  height: 600px;
  width: 200px;
  overflow: scroll;
}

.popover {
  background-color: lightgrey;
  border:  2px solid grey;
  height: 100px;
  width: 200px;
  position: absolute;
}

.hidden { 
  display: none;
}

.section {
  border-top: 1px solid grey;
  padding: 15px;
}

p {
  font-weight: bold;
  font-size: 18px;
}

<div id="popoverOne" class="popover hidden">
 I'm popover 1
</div>
<div id="popoverTwo" class="popover hidden">
 I'm popover 2
</div>
<div id="popoverThree" class="popover hidden">
 I'm popover 3
</div>
<div id="popoverFour" class="popover hidden">
 I'm popover 4
</div>
<div id="popoverFive" class="popover hidden">
 I'm popover 5
</div>
<div id="popoverSix" class="popover hidden">
 I'm popover 6
</div>

<p>
 Look at the JSFiddle as SO's editor is hard to see the issue. Look at Popovers 5 and 6, they are broken because you have to scroll the container. Popovers 1-4 work fine because you do not have to scroll.
</p>

<div  id="container" class="container">
  <div class="section" id="sectionOne">
    1 I'm a side menu<br/> 1 <br/> 1 <br/> 1 <br/> 1 <br/>
    <button onClick="togglePopover('popoverOne', 'sectionOne')">Show popover for this section</button>
  </div>
    
  <div class="section" id="sectionTwo">
    2 With options<br/> 2 and a button to show a popover<br/>2 <br/> 2 <br/> 2 <br/>
    <button onClick="togglePopover('popoverTwo', 'sectionTwo')">Show popover for this section</button>
  </div>
  
  <div class="section" id="sectionThree">
    3 <br/> 3<br/> 3 <br/>3<br/> 3 <br/>
    <button onClick="togglePopover('popoverThree', 'sectionThree')">Show popover for this section</button>
  </div>
  
  <div class="section" id="sectionFour">
    4 <br/> 4<br/> 4 <br/> 4 <br/> 4 <br/>
    <button onClick="togglePopover('popoverFour', 'sectionFour')">Show popover for this section</button>
  </div>
   
  <div class="section" id="sectionFive">
    5 <br/> 5 <br/> 5 <br/> 5 <br/> 5 <br/>
    <button onClick="togglePopover('popoverFive', 'sectionFive')">Show popover for this section</button>
  </div>
  
  <div class="section" id="sectionSix">
    6 <br/> 6 <br/> 6<br/> 6 <br/>6<br/>
    <button onClick="togglePopover('popoverSix', 'sectionSix')">Show popover for this section</button>
  </div>
</div>

I have tried dozens of variations of trying to take the offsetParent.offsetTop, the body's scrollY, and the offsetTop but I cannot get any combination of things to work.

将绝对元素放置在可滚动div中另一个元素的旁边