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

Posted chuangzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 }

 

以上是关于js获取窗口滚动条高度窗口可视范围高度文档实际内容高度滚动条离浏览器底部的高度的主要内容,如果未能解决你的问题,请参考以下文章

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高

请问如何通过jquery获取页面内容的高度?

jquery如何获取元素的滚动条高度等实现代码