scrolling when mouse is hovered over a fixed position div

Question

I am having issues scrolling the parent container when the mouse is kept hovered over a child div that is applied position:fixed . It basically stops scrolling the parent when mouse is above the fixed position child.

Here is my code. I need to scroll the yellow div when mouse is above the red 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> 

I have tried few techniques such as pointer-events:none or scrolling the element via js but both of these methods are not useful for my use case as I need to register events on the element.

Any help ?

Answer 1

It seems to be working with pointer-events: none; on the .fixed element itself...

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