当鼠标悬停在固定位置的div上时滚动

Question

当鼠标悬停在应用了position:fixed属性的子元素上时，我无法滚动父容器。当鼠标位于固定位置的子元素上方时，它会停止滚动父元素。

以下是我的代码。当鼠标在红色

上方时，我需要滚动黄色

：

.parent{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
  padding:20px;  
  background-color:aqua;  
}
.fixed {
  position:fixed;
  top:30px;
  height:50px;
  width:50px;
  background-color:red;
}
.arrow{
  height:50px;
  width:50px;
  background-color:yellow;
}
.child{
  height:100%;
  width:100%;  
  box-sizing:border-box;
  overflow-y:scroll;
  padding:10px;
  background-color:pink;
}
.child-2{
  height:1000px;
  width:100%;  
  box-sizing:border-box;
  background-color:yellow;
}

<div class="parent">  
  <div class="child">    
    <div class="child-2">
      <div class="fixed">  
      </div>
    </div>
  </div>
</div>

我尝试过几种技术，比如使用pointer-events:none或通过js滚动元素，但这些方法在我的用例中都不起作用，因为我需要在元素上注册事件。

有什么帮助吗？

- Vinay

---

这回答解决了你的问题吗？当鼠标位于固定div上方时，滚动底层div的方法？ - biw

Answer 1

似乎在固定的元素上使用pointer-events: none;可以正常工作...

.parent{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
  padding:20px;  
  background-color:aqua;  
}
.fixed {
  position:fixed;
  top:30px;
  height:50px;
  width:50px;
  background-color:red;
  pointer-events: none;
}
.arrow{
  height:50px;
  width:50px;
  background-color:yellow;
}
.child{
  height:100%;
  width:100%;  
  box-sizing:border-box;
  overflow-y:scroll;
  padding:10px;
  background-color:pink;
}
.child-2{
  height:1000px;
  width:100%;  
  box-sizing:border-box;
  background-color:yellow;
}

<div class="parent">  
  <div class="child">    
    <div class="child-2">
      <div class="fixed">  
      </div>
    </div>
  </div>
</div>

- 4lackof

---

我已经在描述中说过，我不能使用pointer-events:none，因为我需要从该div获取事件。 - Vinay

@Vinay明白了，让我想一想这个。 - 4lackof

有点晚了，但如果您将.fixed div的所有内容包装在另一个容器中，并在固定元素上删除指针事件，然后在内部div上替换它，滚动和事件都可以正常工作。至少在Firefox中对我有效 :) - Adam Baranyai