javascript - 悬停固定的 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;
}