js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度
1.获取窗口可视范围的高度
//获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; }else{ var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } return clientHeight; }
2.获取窗口滚动条高度
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
3.获取文档内容实际高度
function getScrollHeight(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
4.使用方法
window.onscroll=function(){ // 窗口可视范围的高度 var height=getClientHeight(), // 窗口滚动条高度 theight=getScrollTop(), // 窗口可视范围的高度 rheight=getScrollHeight(), // 滚动条距离底部的高度 bheight=rheight-theight-height; document.getElementById('show').innerHTML='此时浏览器可见区域高度为:'+height+'<br />此时文档内容实际高度为:'+rheight+'<br />此时滚动条距离顶部的高度为:'+theight+'<br />此时滚动条距离底部的高度为:'+bheight; }