1 //获取窗口可视范围的高度
 2 function getClientHeight(){  
 3     var clientHeight=0;  
 4     if(document.body.clientHeight&&document.documentElement.clientHeight){  
 5         var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
 6     }else{  
 7         var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
 8     }  
 9     return clientHeight;  
10 }

1 function getScrollTop(){  
2     var scrollTop=0;  
3     if(document.documentElement&&document.documentElement.scrollTop){  
4         scrollTop=document.documentElement.scrollTop;  
5     }else if(document.body){  
6         scrollTop=document.body.scrollTop;  
7     }  
8     return scrollTop;  
9 }

1 function getScrollHeight(){  
2     return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
3 }

 1 window.onscroll=function(){
 2     // 窗口可视范围的高度
 3     var height=getClientHeight(),
 4         // 窗口滚动条高度
 5         theight=getScrollTop(),
 6         // 窗口可视范围的高度
 7         rheight=getScrollHeight(),
 8         // 滚动条距离底部的高度
 9         bheight=rheight-theight-height;
10         
11     document.getElementById(‘show‘).innerHTML=‘此时浏览器可见区域高度为：‘+height+‘<br />此时文档内容实际高度为：‘+rheight+‘<br />此时滚动条距离顶部的高度为：‘+theight+‘<br />此时滚动条距离底部的高度为：‘+bheight;
12 }