H5 页面下拉加载更多

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

qq_45670012

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

阅读量717

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=haci02a1ia0j&title=H5+%E9%A1%B5%E9%9D%A2%E4%B8%8B%E6%8B%89%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

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>