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 }

 

posted on 2017-06-11 15:14  chuangzi  阅读(399)  评论(0)  编辑  收藏  举报

导航