HTML: Who takes care show/hide the scrollbar?
Question
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.
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 . (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?
3 answers
solution1
3 ACCPTED 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. 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.¹
What the CSS 2.1 Spec section 9.1.1 says is
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.
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.
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>
results in this:
¹ 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.
solution2
0 2013-11-03 23:04:45
This works:
html {
height:100%;
width:100%;
overflow: hidden;
}
solution3
0 2013-11-03 23:19:47
Scrolling has to do with overflow . When the body overflows the document.documentElement (the html element) the scollbar/bars appear. While other Elements' overflow defaults to visible the html tag defaults to 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.