Question

问题：有可能防止这种行为吗？

我尝试了什么：更改Z索引并搜索论坛。挑战是探针搜索的关键词。通常会获得有关防止固定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;

该解决方案的缺点是您将无法再单击该元素以将其用作按钮。

将鼠标悬停在固定div上可防止在div内滚动

2 个答案: