javascript 读取滚动条位置,文档总高度,页面高度,滚动条距离底端位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监控滚动条位置</title>
<style>
p {
height: 30px;
line-height: 30px;
background: #ddd;
opacity: 0;
}
</style>
</head>
<body>
<div id="show" style="position: fixed;top: 150px;">
</div>
<div>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
</div>
</body>
<script>
//获取窗口可视范围的高度
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;
}
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;
}
function getScrollHeight(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
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;
}
</script>
</html>