焦点在 div 中时禁用正文滚动，在滚动 div 并重新启用溢出后：自动正文滚动答案

【问题标题】：Disabled body scrolling while focus is in div, after scrolling div and re-enabling overflow:auto body scrolls焦点在 div 中时禁用正文滚动，在滚动 div 并重新启用溢出后：自动正文滚动
【发布时间】：2016-10-09 16:15:47
【问题描述】：

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

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

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

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

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

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

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

所以我尝试重现该问题，但在 Firefox 和 Chrome 中都无法重现（请参阅 sn-p）。您可以创建一个可以重现问题的 sn-p 吗？你用的是什么浏览器？

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>

【讨论】：

您是正确的，只有当光标移出可滚动的 div 时仍然滚动时才会出现问题。滚动完成似乎需要很长时间。为了澄清滚动位置已到达，但滚动条（在 div 内）会停留很长时间，如果我在滚动条仍然存在时将鼠标移出，则滚动会传播到正文（除非我按照你提到的那样设置超时)。现在的问题是我需要设置一个长超时> 1秒。你知道我怎样才能让 div 内的滚动更快结束吗？尝试谷歌搜索，但无法提出任何建议。
更好的是，鼠标悬停时是否可以终止滚动？超时会导致一些问题（例如，如果我退出 div 然后返回（在退出超时之前），溢出实际上将设置为自动（而不是隐藏）一个计时器触发（并且我仍然在 div 内） .