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 ?

Does this answer your question? [A way to scroll an underlying div when mouse is on top of a fixed div?](https://stackoverflow.com/questions/13494850/a-way-to-scroll-an-underlying-div-when-mouse-is-on-top-of-a-fixed-div) — biw, Dec 20 '19 at 23:00

score 4 · Answer 1 · answered Sep 20 '16 at 06:51

4

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>

answered Sep 20 '16 at 06:51

4lackof

1,250
14
33

i already said in the description that i cannot use pointer-events:none as i need events from that div – Vinay Sep 20 '16 at 06:53
@Vinay got it, let me thing about this – 4lackof Sep 20 '16 at 06:54
bit late for the party, but if you wrap all the contents of the `.fixed` div in another container, and remove the pointer-events on the fixed element, and later on replace it on the inner div, both the scroll and the events work. at least they do for me in Firefox:) – Adam Baranyai Jul 25 '20 at 16:26

scrolling when mouse is hovered over a fixed position div

1 Answers1