js 移动端上拉加载下一页通用方案

取页面三种高度

//取进度条到底部距离
var getScrollTop = function () {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
};
//取页面可视区域高度
var getClientHeight = function () {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
};
//取文档整体高度
var getScrollHeight = function () {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
};

 

当页面滚动到最底部时，才执行加载下一页的处理方法

//页面滚动事件
window.onscroll = function () {
    if (getScrollTop() + getClientHeight() == getScrollHeight()) {
        //页面已滚动到最底部
        fun();//页面已滚动到最底部处理
    }
};

 

一个DEMO:http://211.140.7.173:8081/t/wuhairui/t/upLoad.html