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获取窗口滚动条高度窗口可视范围高度文档实际内容高度滚动条离浏览器底部的高度的主要内容,如果未能解决你的问题,请参考以下文章