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>
 

 

下面部分是引用的，关于offset 等信息的具体解释
   

 和大家分享这篇日志，我的看法是：

 

原文地址： clientHeight /&    原文作者： it_yinliqing

网页(内容)可见区域宽：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