將鼠標懸停在固定div上可防止在div內滾動

Question

問題：是否可以防止這種行為？

我嘗試過的方法：更改Z-index和搜索論壇。 挑戰是探針搜索的關鍵詞。 通常會獲得有關防止固定div滾動的熱門信息。 一些JS建議，但都帶有閃爍感。

實際應用：導航/關閉不會阻止懸停滾動。

的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

如何使用位置固定而不是固定位置？ 這將需要添加某種包裝文本內容的容器元素。 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

將此CSS樣式添加到固定的div中，以便在將鼠標懸停在nav元素上時進行滾動。

pointer-events: none;

該解決方案的缺點是您將不再能夠單擊該元素以將其用作按鈕。