HTML - 哪个元素具有页面的滚动条：<BODY> 还是 <HTML>？答案

【问题标题】：HTML - Which element has the page's scrollbar: <BODY> or <HTML>?HTML - 哪个元素具有页面的滚动条：<BODY> 还是 <HTML>？
【发布时间】：2018-07-10 01:00:15
【问题描述】：

在一个简单、兼容的 HTML 文档中，

元素中的内容的高度大于浏览器的视口，右侧会出现一个垂直滚动条（当然，除非滚动条被禁用）。

发生这种情况时，滚动条附加到哪个元素：

或？

【问题讨论】：

标签： html scroll standards

【解决方案1】：

默认情况下，至少在 Chrome 中，<html>。您可以通过在此页面上向下滚动并将document.body.scrollTop 与document.getElementsByTagName('html').item(0).scrollTop 进行比较来进行测试。

没有什么要求您保持此选择，并且您可以使用 CSS 覆盖此默认行为。

【讨论】：

【解决方案2】：

如果您想知道元素如何附加 CSS 属性 overflow，这无关紧要。您可以根据需要将其附加到<html> 或<body>。

【讨论】：

【解决方案3】：

正如大卫·默多克所描述的Here这是最好的了解方式

function getScrollingElement() {
  var d = document;
  return d.documentElement.scrollHeight > d.body.scrollHeight &&
    d.compatMode.indexOf('CSS1') == 0 ?
    d.documentElement :
    d.body;
}

【讨论】：

【解决方案4】：

尝试添加：

   * {
outline: 1px solid green;
}

然后当您向下滚动时，您可以在右键单击它以检查元素后看到高框（大的）然后您应该看到您需要的所有信息。

【讨论】：