js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度

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;
 6     }else{
 7         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.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 }