网页里的各种高度和宽度(3)scrollTop、scrollLeft、scrollWidth、scrollHeight
在做页面设计的时候经常遇到要操作页面的各种高度和宽度 , 里面有很多容易混淆的的参数 . 现在参考网上的资料做一次整理 , 希望对不是很清楚的朋友起到一点帮助作用 .
一下内容文字内容引用自 : www.cftea.com , 我对其进行简单编辑 , 配合文字给出了图例 , 希望能更加明了 .
scrollTop 是 “ 卷 ” 起来的高度值，示例：
< div style ="width:200px;height:200px;background-color:#999999;overflow:hidden;" id ="p">
< div style ="width:100px;height:300px;background-color:#FFFF00;" id ="t">
如果为p 设置了scrollTop ，这些内容可能不会完全显示。
</ div >
</ div >
< script type ="text/javascript">
<!--
var p = document.getElementById("p" );
p.scrollTop = 10;
//-->
</ script >
scrollTop 、 scrollLeft
由于为外层元素 p （注意是 p ，不是 t ）设置了 scrollTop ，所以内层元素会向上 “ 卷 ” ，这卷起来的部分就是 scrollTop 。
scrollLeft 也是类似道理。
scrollWidth 、 scrollHeight
我们已经知道 offsetHeight 是自身元素的高度，而 scrollHeight 是内层元素 的实际高度 + 外层元素 padding ，包含内层元素的隐藏 的部分。
上述中 p （注意是 p ，不是 t ）的 offsetHeight 为 200 ，而其 scrollHeight 为 300 。 如果 p 具有 padding ，那么应该把 padding 算到 scrollHeight 中，但其 border 、 margin 不应计算在内。
scrollHeight 也是类似道理。
IE 和 FireFox 全面支持，而 Netscape 8 和 Opera 7.6 不支持 scrollTop 、 scrollLeft （ document.body.scrollTop 、 document.body.scrollLeft 除外）。