重叠时如何滚动div

Posted 2023-05-08

【中文标题】重叠时如何滚动div

【英文标题】：How to scroll div when overlapped

【发布时间】：2017-07-22 15:07:30

【问题描述】：

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

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

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

我有一种简化的方式来显示问题。即使我超过了顶部的红色，我也想保持 gren DIV 滚动...

overflow:scroll;

sample code

【参考方案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 上我也有一些点击事件，所以我需要能够捕捉到鼠标事件...

在这种情况下 - 不可能。您想如何判断鼠标交互应该针对哪个元素？

好吧，我想通过点击孩子，但保持滚动主要...有一种方法来隔离他们？