javascript - 使用 Position Fixed 子项滚动 Div

Question

我有一个包含一些内容的 div。此 div 将其溢出-y 设置为滚动。

在包装器内部，还有 2 个 div。第一个的高度大于包装器，第二个包含一些内容并且是绝对定位的。

<div id="wrapper" style="overflow-y:scroll;height:500px">
  <div id="setHeight" style="height:1000px"></div>
  <div id="content" style="position:fixed">
    Content Goes Here
  </div>
</div>

问题是当鼠标位于 上时#content div，#wrapper不会滚动。但是，当鼠标位于未填充的其他部分时，#wrapper div它#content div会滚动。

我试图以各种方式解决这个问题：

第一：将z-indexof设置#content为-1。这有效（如在#wrapper卷轴中），但无法再与内容交互。

第二：应用上述修复，但使用 Javascript 来监听鼠标点击。当用户单击时，立即将#content'更改z-index为1允许用户交互。

问题在于即使它有效（即z-index更改），浏览器仍然不会与 交互，#content除非您松开鼠标并再次单击。当您放开鼠标时，我希望它#wrapper可以再次滚动。

第三：我尝试将 设置#content z-index为-1，并将#wrapper's设置pointer-events为none。然而，这使得滚动和交互都停止了。

有没有办法做到这一点？

标签： javascripthtmlcss

Answer 1

#wrapper {
  background: red;
  overflow-y: scroll;
  height: 100px; border: solid 1px;}
#header {
  background: lightblue;
  height: 200px; overflow-y: none;}
#content {
  background: green;}
#popup {
  background: yellow;
  position: fixed;
  top: 0;
  opacity: 0.5;
  pointer-events: none;
}

<div id="wrapper">
  <div id="header">Headerum textum</div>
  <div id="content">
    Contentum Textum
    <div id="popup">
      Popup textum, lorem ipsum dolor sit amet, consectetur adipiscing elit. ... Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.
    </div>
  </div>
</div>

请看一下……在这个CodePen上