网页里的各种高度和宽度(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 除外）。