您的位置:首页 > 其它

判断页面是否滚动到底部

2017-04-07 16:19 423 查看
var isPageBottom=function () {  

    var scrollTop = 0;  

    var clientHeight = 0;  

    var scrollHeight = 0;  

    if (document.documentElement && document.documentElement.scrollTop) {  

        scrollTop = document.documentElement.scrollTop;  

    } else if (document.body) {  

        scrollTop = document.body.scrollTop;  

    }

    

    if (document.body.clientHeight && document.documentElement.clientHeight) {  

        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  

    } else {  

        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  

    }

    // 知识点:Math.max 比较大小,取最大值返回

    scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);  

    if (scrollTop + clientHeight+633 >= scrollHeight) {  

        return true;  

    } else {  

        return false;  

    }  

}

isPageBottom()

 函数解释

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  移动