HTML：谁负责显示/隐藏滚动条？
[英]HTML: Who takes care show/hide the scrollbar?
问题描述
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. 
我阅读了一些在线文章，他们说html标记代表浏览器窗口，因此html等于浏览器窗口的大小。 If the body size is greater than the html size, then the scrollbar will show up. 如果正文大小大于html大小，则会显示滚动条。 So it is the html element that controls to display the scrollbar or not. 因此，控制是否显示滚动条的是html元素。
It's like in this picture: 就像这张照片：
You may think of it like: 您可能会想到：
html { overflow: auto; }
So if want to hide the scroll bar on purpose, I would do: 因此，如果要故意隐藏滚动条，我可以这样做：
// myCSS.css
html { overflow: hidden;// override default }
If I want to scroll to a position of the body: 如果要滚动到身体的某个位置：
var position = 500;
$('html').animate({scrollTop: position}, 1000);
This sounds all promising. 这听起来很有希望。 But I used FireBug to check the height of the html tag, they are always greater or equal than the size of body . 但是我用FireBug检查html标签的高度，它们总是大于或等于body的大小。 (Assuming a default webpage with no css, and contents in body exceed window size) The html tag size is not really the size of the browser window, and it is more of the size of body element. （假定默认网页没有CSS，并且正文中的内容超过窗口大小） html标签的大小实际上并不是浏览器窗口的大小，而是正文元素的大小。
So where does the scrollbar really come from? 那么滚动条真正从哪里来？ How does the scrollbar really work? 滚动条如何真正起作用？
3 个解决方案
解决方案1
3 已采纳 2013-11-03 23:00:55
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size.
That's very wrong indeed.¹ 确实这是非常错误的。¹
What the CSS 2.1 Spec section 9.1.1 says is CSS 2.1规范第9.1.1节说的是
When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
Yet that doesn't seem quite correct either, since a scroll is not generally provided to move the viewport over areas of the canvas that have a negative x or negative y value, even if content is painted there. 但这似乎也不是很正确，因为通常不会提供滚动来将视口移到具有负x或负y值的画布区域上，即使在此处绘制内容也是如此。
The best I can establish is that the scroll bars are made available to move the viewport over the areas of the canvas which have a rendered box for 0 or positive x and y co-ordinates. 我能建立的最好的办法是使滚动条可用于在画布的区域上移动视口，该区域具有用于0或正x和y坐标的渲染框。
Whatever, neither the size of the html element box, nor the body element box are special. 无论如何，html元素框的大小和主体元素框的大小都不是特殊的。 They are just rendered boxes on the canvas, the same as other elements. 它们只是在画布上渲染的框，与其他元素相同。 Other elements may be rendered outside those boxes, because of overflow or absolute positioning and the scroll mechanism will take the full size of those elements into account. 由于溢出或绝对定位，其他元素可能会在这些框外呈现，并且滚动机制将考虑这些元素的完整大小。
An example and diagram may help understanding. 示例和图表可能有助于理解。 Consider this example: 考虑以下示例：
<!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>
results in this: 结果：
¹ The online article probably, and the picture in the question definitely, come from http://phrogz.net/css/htmlvsbody.html . ¹网上文章以及问题中的图片肯定来自http://phrogz.net/css/htmlvsbody.html 。 It should be noted that that article was written in 2004. In 2004, what the then draft CSS 2.1 said didn't really matter. 应当指出的是，该文章写于2004年。2004年，当时的CSS 2.1草案所说的并不重要。 What mattered was what IE6 did, and the article does describe what IE6 did. 重要的是IE6的功能，而这篇文章确实描述了IE6的功能。
解决方案2
0 2013-11-03 23:04:45
This works: 这有效：
html {
height:100%;
width:100%;
overflow: hidden;
}
解决方案3
0 2013-11-03 23:19:47
Scrolling has to do with overflow . 滚动与overflow 。 When the body overflows the document.documentElement (the html element) the scollbar/bars appear. 当body溢出document.documentElement （html元素）时，将显示滚动条。 While other Elements' overflow defaults to visible the html tag defaults to scroll . 其他元素的overflow默认为visible而html标签默认为scroll 。 To answer your question, the scrollbar appears on the parent of the overflowing content, when the parent's overflow is set to scroll , in this case the html tag. 为了回答您的问题，当父级的overflow设置为scroll ，滚动条出现在溢出内容的父级上，在本例中为html标签。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.