CODEWITHSUNDEEP
javascripthtmlcsscss-position
Vinay
Vinay

Reputation: 743

scrolling when mouse is hovered over a fixed position div

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 ?

Upvotes: 3

Views: 1971

Answers (1)

4lackof
4lackof

Reputation: 1390

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>

Upvotes: 4

Related Questions