固定位置divにマウスを移動したときにスクロールする

Question

position:fixedが適用されている子div上にマウスを置いたままにすると、親コンテナをスクロールする際に問題が発生しています。マウスが固定された位置の子の上にあるとき、親のスクロールを基本的に停止します。

ここに私のコードです。 Iは、pointer-events:noneまたはJSを介して素子をスクロールするなど、いくつかの技術を試みているが、これらの方法の両方がある

.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>

：私はマウスが赤色のdiv上回るとき黄色DIVをスクロールする必要があります要素にイベントを登録する必要があるため、私のユースケースには役に立ちません。

助けが必要ですか？

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>