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.οnscrοll=function(){// 窗口可视范围的高度var height=getClientHeight(),// 窗口滚动条高度theight=getScrollTop(),// 窗口可视范围的高度rheight=getScrollHeight(),// 滚动条距离底部的高度bheight=rheight-theight-height;document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;}