重叠时如何滚动div

Question

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

下部 div 在 z-index 90 处包含滚动功能，上部 div 在 z-index 100 处包含悬停元素

通过滚动lowe div，一旦我将鼠标悬停在另一个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>