overflow div滚动异常：如何阻止body随内容div滚动？

问题原因 #

这是浏览器的滚动链（scroll chaining） 行为：当滚动容器到达滚动边界时，浏览器会自动将滚动事件传递给父级元素，即便body设置了overflow:hidden，快速滚动到容器顶部时仍会触发这个默认行为。

解决方案 #

方案1：使用CSS overscroll-behavior 属性（推荐） #

直接给滚动容器添加overscroll-behavior-y: contain，可原生阻止滚动事件向父元素传递，适配现代浏览器，实现最简单高效。

修改后的CSS代码：

body {
  overflow: hidden;
}

#content {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
  /* 新增属性阻止滚动链 */
  overscroll-behavior-y: contain;
}

方案2：JavaScript 监听滚动事件并阻止默认行为 #

若需兼容旧版浏览器，可通过监听wheel事件，判断容器是否处于滚动边界，在边界触发时阻止默认行为。

添加以下JS代码：

const content = document.getElementById('content');

content.addEventListener('wheel', (e) => {
  const isAtTop = content.scrollTop === 0;
  const isAtBottom = content.scrollHeight - content.scrollTop === content.clientHeight;

  // 滚动到顶部且向上滚动，或滚动到底部且向下滚动时，阻止默认行为
  if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
    e.preventDefault();
  }
});

注意：该方案可能影响部分浏览器的原生滚动体验（如弹性滚动），优先推荐CSS方案。

内容的提问来源于stack exchange，提问作者Gigabit