带有固定位置子级的Scroll 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-index中的#content设置为-1。这样可以正常工作（就像在#wrapper滚动中一样），但是内容不再可以与之交互。

第二：，应用以上修复程序，但使用Javascript侦听鼠标单击。用户单击时，立即将#content的{​​{1}}更改为z-index，以允许用户进行交互。

问题是即使它起作用（即1更改），除非您放开鼠标并再次单击，否则浏览器仍不会与z-index进行交互。在您放开鼠标时，我希望#content再次可滚动。

第三步：：我尝试将#wrapper #content设置为z-index，并将-1的{​​{1}}设置为#wrapper。但是，这使得滚动和交互都停止了。

反正有这样做吗？

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

Answer 2

不知道为什么需要setHeight div。对您的代码做了一些更改。不知道这是不是你想要的。

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