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

js 移动端上拉加载下一页通用方案的相关教程结束。