2

我看了一些网上的文章，他们说html标签代表浏览器窗口，所以html等于浏览器窗口大小。如果正文大小大于html大小，则将显示滚动条。所以它是控制是否显示滚动条的html元素。

就像在这张照片中：

在此处输入图像描述

你可能会这样想：

html { overflow: auto; }

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

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

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

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

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

那么滚动条到底是从哪里来的呢？滚动条是如何工作的？

4

3 回答 3

3

我看了一些网上的文章，他们说html标签代表浏览器窗口，所以html等于浏览器窗口大小。如果正文大小大于 html 大小，则将显示滚动条。所以它是控制是否显示滚动条的html元素。

这确实是非常错误的。¹

CSS 2.1 规范第 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>

提琴手

结果是：

可滚动区域

¹ 网上的文章大概和问题中的图片肯定来自http://phrogz.net/css/htmlvsbody.html。需要注意的是，那篇文章写于 2004 年。在 2004 年，当时的 CSS 2.1 草案所说的内容并不重要。重要的是 IE6 做了什么，这篇文章确实描述了 IE6 做了什么。

于 2013-11-03T23:00:55.290 回答
0

滚动与overflow. 当body溢出document.documentElement （html 元素）时，会出现 scollbar/bars。而其他元素的默认overflow标签默认为. 为了回答您的问题，滚动条出现在溢出内容的父级上，当父级设置为 时，在本例中为标记。visiblehtmlscrolloverflowscrollhtml

于 2013-11-03T23:19:47.090 回答
0

这有效：

html {
   height:100%;
   width:100%;
   overflow: hidden;
}
于 2013-11-03T23:04:45.487 回答