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

Question

当鼠标悬停在应用position:fixed的子div上时，滚动父容器时出现问题。当鼠标位于固定位置子项上方时，它基本上会停止滚动父项。

这是我的代码。当鼠标位于红色div上方时，我需要滚动黄色div：

.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滚动元素，但这两种方法对我的用例都没用，因为我需要在元素上注册事件。

任何帮助？

Answer 1

似乎在pointer-events: none;元素本身上使用.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;
  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>