HTML:谁负责显示/隐藏滚动条? [英] HTML: Who takes care show/hide the scrollbar?
问题描述
我阅读了一些在线文章，他们说 html 标签代表浏览器窗口，因此 html 等于浏览器窗口的大小.如果 body 的大小大于 html 的大小，则会显示滚动条.因此，是 html 元素控制是否显示滚动条.
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
就像这张照片:
您可能会这样想:
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);
这听起来很有希望.但是我用FireBug检查了 html 标签的高度，它们总是大于或等于 body 的大小. (假设默认网页没有CSS，并且正文内容超出了窗口大小) html 标签的大小实际上并不是浏览器窗口的大小，而是大于 body的大小元素.
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. (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.
那么滚动条真正从哪里来?滚动条如何真正起作用?
So where does the scrollbar really come from? How does the scrollbar really work?
推荐答案
我阅读了一些在线文章，他们说html标记代表 浏览器窗口，因此html等于浏览器窗口大小.如果 主体尺寸大于html尺寸，则滚动条将显示 向上.因此，是html元素控制显示滚动条 是否.
I read some online articles and they say that html tag represent the browser window, so html is equals to the browser window size. If the body size is greater than the html size, then the scrollbar will show up. So it is the html element that controls to display the scrollbar or not.
那确实是非常错误的.¹
That's very wrong indeed.¹
当视口小于画布所在区域时， 呈现文档后，用户代理应提供滚动 机制.
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.
但这似乎也不是很正确，因为通常不会提供滚动来将视口移到具有负x或y负值的画布区域上，即使在其中绘制内容也是如此.
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.
我能建立的最好的办法是使滚动条可用于在画布区域上移动视口，该区域具有用于0或正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.
无论如何，html元素框的大小和主体元素框的大小都不是特殊的.它们只是在画布上渲染的框，与其他元素相同.由于溢出或绝对定位，其他元素可能会在这些框外呈现，并且滚动机制将考虑这些元素的完整大小.
Whatever, neither the size of the html element box, nor the body element box are special. 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>
结果:
¹在线文章，和问题中的图片肯定来自 http://phrogz.net/css/htmlvsbody.html .应当指出的是，该文章写于2004年.2004年，当时的CSS 2.1草案所说的并不重要.重要的是IE6的功能，而文章确实描述了IE6的功能.
¹ The online article probably, and the picture in the question definitely, come from 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. What mattered was what IE6 did, and the article does describe what IE6 did.
这篇关于HTML:谁负责显示/隐藏滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
