将鼠标悬停在固定div上可防止在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/

Answer 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;
}

Answer 2

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.