javascript - 滚动 div 并重新启用溢出后，焦点位于 div 时禁用正文滚动 :auto body scrolls

Question

我有一个可滚动的 <div>在我体内，我希望用户能够滚动。然而，当 div 到达顶部/底部时，整个页面开始滚动，这是不希望的。

我已经通过在 div 标签中包含以下内容来阻止正文滚动:

onmouseover="document.body.style.overflow='hidden';"
onmouseout="document.body.style.overflow='auto';"`

在大多数情况下这是有效的，因为如果焦点不在可滚动的 div 内，我希望用户能够滚动正文。

问题是，如果我从 div 中退出鼠标光标后立即在 div 中进行滚动(这样 body overflow 再次设置为 auto)，body 开始滚动，就好像滚动事件有一个从可滚动 div(到正文)的延迟传播。

我是一名网络开发新手，非常感谢任何帮助。

谢谢

Answer 1

所以我尝试重现该问题，但无法在 Firefox 和 Chrome 中重现(请参阅代码段)。您能否创建一个能够重现问题的片段？您使用的是什么浏览器？

div.first {
  height: 200vh;
}
div.first > div {
  height: 70vh;
  overflow: scroll;
}
div.first > div > div {
  background: orange;
  height: 200vh;
  width: 300px;
}
div {
  display: inline-block;
  margin-right: 300px;
}

<div class="first">
  <div onmouseover="document.body.style.overflow='hidden';"
onmouseout="document.body.style.overflow='auto';">
    <div>test</div>
  </div>
</div>

也就是说，当您仍在滚动时将光标移出可滚动的 div 时，您的问题可能会出现。在下面的脚本中，我设置了 onmouseout="setTimeout(function(){ document.body.style.overflow='auto'; }, 500);" 这意味着在光标离开 div 之后0.5 秒的超时在正文可以再次滚动之前开始。

div.first {
  height: 200vh;
}
div.first > div {
  height: 70vh;
  overflow: scroll;
}
div.first > div > div {
  background: orange;
  height: 200vh;
  width: 300px;
}
div {
  display: inline-block;
  margin-right: 300px;
}

<div class="first">
  <div onmouseover="document.body.style.overflow='hidden';"
onmouseout="setTimeout(function(){ document.body.style.overflow='auto'; }, 500);">
    <div>test</div>
  </div>
</div>