Question

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

我设法通过在div标签中包含以下内容来阻止身体滚动：

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

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

问题是，如果我从div中退出鼠标光标时在div中滚动（这样身体溢出再次设置为自动），身体开始滚动，就像滚动事件有一个从可滚动的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之后，在可以再次滚动正文之前启动.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>

当焦点位于div中时，禁用正文滚动，滚动div并重新启用溢出后：自动正文滚动

1 个答案: