HTML：谁负责显示/隐藏滚动条？
[英]HTML: Who takes care show/hide the scrollbar?
问题描述
我阅读了一些在线文章，他们说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，并且正文中的内容超过窗口大小） html标签的大小实际上并不是浏览器窗口的大小，而是正文元素的大小。
那么滚动条真正从哪里来？ 滚动条如何真正起作用？
3 个解决方案
解决方案1
3 已采纳 2013-11-03 23:00:55
我阅读了一些在线文章，他们说html标记代表浏览器窗口，因此html等于浏览器窗口的大小。 如果正文大小大于html大小，则会显示滚动条。 因此，控制是否显示滚动条的是html元素。
确实这是非常错误的。¹
当视口小于在其上呈现文档的画布区域时，用户代理应提供滚动机制。
但这似乎也不是很正确，因为通常不会提供滚动来将视口移到具有负x或负y值的画布区域上，即使在此处绘制内容也是如此。
我能建立的最好的办法是使滚动条可用于在画布的区域上移动视口，该区域具有用于0或正x和y坐标的渲染框。
无论如何，html元素框的大小和主体元素框的大小都不是特殊的。 它们只是在画布上渲染的框，与其他元素相同。 由于溢出或绝对定位，其他元素可能会在这些框外呈现，并且滚动机制将考虑这些元素的完整大小。
示例和图表可能有助于理解。 考虑以下示例：
<!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的功能。
解决方案2
0 2013-11-03 23:04:45
这有效：
html {
height:100%;
width:100%;
overflow: hidden;
}
解决方案3
0 2013-11-03 23:19:47
滚动与overflow 。 the scollbar/bars appear. 当body溢出document.documentElement 将显示滚动条。 其他元素的overflow默认为visible而html标签默认为scroll 。 为了回答您的问题，当父级的overflow设置为scroll ，滚动条出现在溢出内容的父级上，在本例中为html标签。
iScroll隐藏/显示滚动条
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.