Hovering fixed div prevents scroll inside div

Question

Question: Is it possible to prevent this behaviour?

What I tried: Changing Z-index and searching forums. Challenge is prober key-words for prober search. Mostly get hits about preventing scroll behind fixed divs. A few JS suggestions but all with flicker.

Real-world application: Nav/close not preventing scroll on hover.

HTML

<div class="box">
    <div class="nav">nav (close)</div>
    More text in full example. (lorem ipsum)
</div>

CSS

.nav {
    position: fixed;
    top: 80px;
    right: 80px;
    padding: 50px;
    background-color: pink;
    border: 3px solid red;
}

.box {
    position: fixed;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    border: 3px solid red;
    overflow: scroll;
}

https://jsfiddle.net/johnmichealsen/nyo5Lzck/8/

Please see [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — coderpc, Mar 19 '19 at 20:06
@pavan Please give me just 2 min to edit this. First post and need the code added. — Thomas, Mar 19 '19 at 20:09
@Alex Thanks for cleaning things up. I'll follow your example in the future. — Thomas, Mar 20 '19 at 12:10

score 1 · Accepted Answer · answered Mar 19 '19 at 20:47

1

How about using position sticky instead of fixed? This would require an added container element of some sort wrapping the text content. https://jsfiddle.net/Lmp6bagq/

.nav {
  position: sticky;
  top: 80px;
  right: 20px;
  float: right;
  width: 200px;
  padding: 50px;
  background-color: pink;
  border: 3px solid red;
  z-index: 1;
}


.content {
  position: absolute;
  width: 100%;
}

.box {
  position: fixed;
  top: 50px;
  right: 50px;
  left: 50px;
  bottom: 50px;
  border: 3px solid red;
  overflow: scroll;
}

answered Mar 19 '19 at 20:47

bl0cklevel

151
1
5

Hey Nick. That might be the way to go. I needed to add -webkit-, and then checked https://caniuse.com/#search=sticky. Thinking I might follow your thought but do this with JS to get broader coverage. Would you be worried about support? – Thomas Mar 19 '19 at 21:17
Well, it depends on what browsers you need to support. We don't support IE 11 so I've been using position sticky on production sites without issue (knock on wood) so far. – bl0cklevel Mar 19 '19 at 21:22
Thats all I need to hear ;) Thanks again. – Thomas Mar 19 '19 at 21:29

Alex Malcolm · Answer 2 · 2019-03-19T20:20:22.303

0

Add this CSS styling to your fixed div to allow scrolling while hovering over the nav element.

pointer-events: none;

The downside to this solution is that you'll no longer be able to click on the element to use it as a button.

edited Mar 19 '19 at 20:20

answered Mar 19 '19 at 20:14

Alex Malcolm

529
1
7
18

Thanks Alex. This is very elegant, but you're right. Need that click. Thanks though for not jumping on me. – Thomas Mar 19 '19 at 20:22
@Thomas No problem, I haven't tried it yet but this looks like it solves the clicking without scrolling issue: https://stackoverflow.com/questions/40091283/pointer-events-on-click-but-not-on-scroll – Alex Malcolm Mar 19 '19 at 20:24
Went with Nicks answer. But upvoted (can't be seen 'cause I'm new), for pointing at a possible direction :) – Thomas Mar 19 '19 at 21:34

Hovering fixed div prevents scroll inside div

2 Answers2