H5 页面下拉加载更多

最新推荐文章于 2024-08-06 11:06:11 发布

weixin_30827565

最新推荐文章于 2024-08-06 11:06:11 发布

阅读量965

点赞数

原文链接：http://www.cnblogs.com/yysbolg/p/8687607.html

版权

1.html页面:

<body onload="index_roll()">                                                                                                                                        
...                                                                                                                                
</body>

2.js

<script type="application/javascript">
    //获取滚动条当前的位置
    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 getClientHeight() {
        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;
    };

    //获取文档完整的高度
    function  getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    };

var num=1;
    //滚动加载
    function index_roll(){
        window.addEventListener('scroll', function(){
            if (getScrollTop() + getClientHeight() >= (getScrollHeight()-10)) {
            //要执行的方法
          console.log("打印"+num);
          num++;
        }
    })
    }
</script>