1.获取窗口可视范围的高度

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; 8     }   9     return clientHeight;  10 }
     

2.获取窗口滚动条高度

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 }

3.获取文档内容实际高度

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

4.使用方法

1 window.οnscrοll=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+'
此时文档内容实际高度为：'+rheight+'
此时滚动条距离顶部的高度为：'+theight+'
此时滚动条距离底部的高度为：'+bheight;12 }