我有一个包含一些内容的 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
。然而,这使得滚动和交互都停止了。
有什么办法吗?
最佳答案
#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
关于javascript - 使用位置固定子项滚动 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52750635/