javascript - 使用位置固定子项滚动 Div

Question

我有一个包含一些内容的 div。这个 div 将其 overflow-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 不'填充它滚动。

我尝试通过多种方式解决这个问题:

首先:将#content的z-index设置为-1。这有效(如在 #wrapper 滚动中一样)，但内容无法再与之交互。

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

问题是即使它有效(即 z-index 改变)，浏览器仍然不会与 #content 交互，除非你放手鼠标，然后再次单击。当你放开鼠标时，我希望 #wrapper 再次可以滚动。

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

有什么办法吗？

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