Question

我阅读了一些在线文章，他们说 html 标记代表浏览器窗口，因此 html 等于浏览器窗口大小。如果正文大小大于 html 大小，则会显示滚动条。因此， html 元素可以控制显示滚动条。

就像在这张照片中一样：

enter image description here

您可能会想到：

html { overflow: auto; }

因此，如果想要故意隐藏滚动条，我会这样做：

// myCSS.css
html { overflow: hidden;// override default }

如果我想滚动到身体的位置：

var position = 500;
$('html').animate({scrollTop: position}, 1000);

这听起来很有希望。但我使用FireBug来检查 html 标记的高度，它们总是大于或等于 body 的大小。（假设没有css的默认网页，并且正文中的内容超出窗口大小） html 标记大小实际上不是浏览器窗口的大小，而是更大的 body的大小元素。

那么滚动条真正来自哪里？滚动条如何真正起作用？

Answer 1

我阅读了一些在线文章，他们说html标签代表了浏览器窗口，所以html等于浏览器窗口大小。如果正文大小大于html大小，然后滚动条会显示起来。因此，控制显示滚动条的是html元素或不。

确实非常错误.¹

CSS 2.1 Spec section 9.1.1所说的是

当视口小于画布的区域时文档被渲染，用户代理应该提供滚动机制。

然而，这似乎也不正确，因为通常不提供滚动来将视口移动到画布上具有负x或负y值的区域，即使在那里绘制了内容。

我能确定的最好的是滚动条可用于在画布区域上移动视口，该区域具有0或正x和y坐标的渲染框。

无论如何，html元素框的大小和body元素框都不是特殊的。它们只是在画布上呈现框，与其他元素相同。由于溢出或绝对定位，其他元素可能会在这些框之外呈现，滚动机制会考虑这些元素的完整大小。

示例和图表可能有助于理解。考虑这个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Scroll limits</title>
    <style>
      html { padding:20px; border:1px green solid; height:80px; }
      body { margin:0; border:1px black solid; height:150px; }
      #div1 { position:absolute; top:-50px; height:65px; left:-50px; 
              width: 65px; background-color:blue; }
      #div2 { position:absolute; top:200px; height:65px; left: 110%; 
              width: 65px; background-color:yellow; }
    </style>
  </head>
  <body>
    body
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
  </body>
</html>

JsFiddle

结果如下：

Scrollable area

_{¹可能在线文章和问题中的图片来自http://phrogz.net/css/htmlvsbody.html。应该指出的是，那篇文章写于2004年。2004年，当时的CSS 2.1草案所说的并不重要。重要的是IE6做了什么，文章描述了IE6的作用。}

Answer 2

这有效：

html {
   height:100%;
   width:100%;
   overflow: hidden;
}

Answer 3

滚动与overflow有关。当body溢出document.documentElement （html元素）时，会出现scollbar / bars。当其他元素“overflow默认为visible时，html标记默认为scroll。要回答您的问题，当父级overflow设置为scroll时，滚动条会显示在溢出内容的父级上，在这种情况下为html标记。

HTML：谁小心显示/隐藏滚动条？

3 个答案: