clientHeight / scrollHeight / offsetHeight 等属性的区别图

取document.body.scrollTop 值时 一直为0, 是因为：

页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。
页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容（不管有没有 DTD），可以使用如下代码：
var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

下面是一个右侧动态悬浮的例子： 兼容firefox 和 IE 7 （IE 版本太多了 ，测试不过来）

<script type="text/javascript" language="javascript">
function scall() {
var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

$get("divChat").style.top = (scrollTop + 300)+"px";
}

window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
</script>

<div id="divChat" style="position: absolute;right:0;top:300px;" title='Click here to chat with us.'>
Test chat div

</div>


网页(内容)可见区域宽：document.body.clientWidth

网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth



原文链接：http://blog.163.com/it_yinliqing/blog/static/784972712008111011843895/