![](/img/trans.png)
[英]Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
[英]Hovering fixed div prevents scroll inside div
问题:是否可以防止这种行为?
我尝试过的方法:更改Z-index和搜索论坛。 挑战是探针搜索的关键词。 通常会获得有关防止固定div滚动的热门信息。 一些JS建议,但都带有闪烁感。
实际应用:导航/关闭不会阻止悬停滚动。
的HTML
<div class="box">
<div class="nav">nav (close)</div>
More text in full example. (lorem ipsum)
</div>
的CSS
.nav {
position: fixed;
top: 80px;
right: 80px;
padding: 50px;
background-color: pink;
border: 3px solid red;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
如何使用位置固定而不是固定位置? 这将需要添加某种包装文本内容的容器元素。 https://jsfiddle.net/Lmp6bagq/
.nav {
position: sticky;
top: 80px;
right: 20px;
float: right;
width: 200px;
padding: 50px;
background-color: pink;
border: 3px solid red;
z-index: 1;
}
.content {
position: absolute;
width: 100%;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
将此CSS样式添加到固定的div中,以便在将鼠标悬停在nav元素上时进行滚动。
pointer-events: none;
该解决方案的缺点是您将不再能够单击该元素以将其用作按钮。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.