javascript - 当鼠标悬停在固定位置 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

它似乎在 .fixed 元素本身上使用 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>