Question

我有滚动问题我有一个DIV自动填充位置固定的元素

下面的div包含z-index 90处的滚动函数，z-index 100上面的div包含悬停上的元素

通过滚动lowe div，滚动停止一旦我将鼠标悬停在另一个...

我有一种简化的方法来展示这个问题。我想保持gren DIV滚动，即使我已经超过顶部的红色......

overflow:scroll;

sample code

Answer 1

只需在您的红色div上声明pointer-events: none; 这将解决捕获鼠标事件的问题，但另一方面它会阻止您完全与元素交互。

.parent {
    width: 400px;
    height: 200px;
    background-color:green;
    border: 1px solid black;
    overflow:scroll;
    z-index: 100;
    display: block; 
    cursor: pointer;
}

.child1 {

    /* this prevents mouse events being captured by this element*/
    pointer-events:none;
    
    position:absolute;
    z-index: 110;
    background-color: red;
    top:50px;
    height:40px;
    width:120px;
}

<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis 
</div>
<div class="child1">
hello world filler
</div>

重叠时如何滚动div

1 个答案: