js实现滚动条滚动到页面底部继续加载

这是个完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;

            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .myBox{
            min-height: 1000px;
            background-color: #ff0;
            overflow: hidden;
        }

        /*-- 进度条 --*/
        .waterfllow-loading {
            z-index: 2000;
            display: none;
        }
        .waterfllow-loading.active {
            display: block;
        }
        .waterfllow-loading img.loading-progress {
            position: fixed;
            /* 设置进度条水平居于窗口正中 */
            margin-left: auto;
            margin-right: auto;
            left:0;
            right:0;

            /* 不能设置margin-top:auto 和 margin-bottom: auto 否则IE下bottom就不顶用了 */
            bottom: 30px;
        }
    </style>
</head>
<body>

<div class="myBox">

    <!--加载进度条 -->
    <div class="waterfllow-loading">
        <img class="loading-progress" src="busy.gif" />
    </div>

</div>


<script src="jquery.min-3.3.1.js"></script>
<script>
    //->获取页面顶部被卷起来的高度
    function scrollTop() {
        //->document.body.scrollTop(chrome)
        //->document.documentElement.scrollTop(firefox/IE)
        return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    }

    //->获取页面文档的总高度
    function documentHeight() {
        //->现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和
        //->document.documentElement.scrollHeight都可以
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }

    //->获取页面浏览器视口的高度
    function windowHeight(){
        //->document.compatMode有两个取值。
        //->BackCompat:标准兼容模式关闭。 CSS1Compat:标准兼容模式开启。
        return (document.compatMode == "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    }


    //->只能使用window方式绑定，使用document方式不起作用
    //->图片查询中对浏览器主页面滚动事件处理(瀑布流)
    $(window).on('scroll', function() {
        // console.log(scrollTop());
        console.log(documentHeight());   //->2000
        console.log(windowHeight());  //->754,固定的，浏览器可视区域的高度
        //->如果滚动条滚动的高度加上窗口可视高度， 大于文档的总高度+50， 那么说明滚动条滚动到了底部。
        if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
            console.log('滚动到底部了!');
            //->去加载数据
            waterallowData();
        }
    });

    //->去加载数据
    function waterallowData() {
        //->显示进度条
        $('.waterfllow-loading').addClass('active');

        //->AJAX
        $.ajax({
            url: 'http://www.xxx.com/api/articles?pageIndex=1&pageSize=10',
            type: 'get',
            success: function(result) {
                //->添加数据
                console.log(result);

                var ahtml = '<div>';
                for(var i=0; i<result.data.length; i++) {
                    ahtml += '<p>';
                    ahtml += result.data[i].title;
                    ahtml += '</p>';
                }
                ahtml += '</div>';

                //->追加HTML到waterfllow-loading的前面
                $(".waterfllow-loading").before(ahtml);

                //->隐藏进度条
                $('.waterfllow-loading.active').removeClass('active');
            }
        });
    }
</script>
</body>
</html>

这个例子实现了滚动到底部继续加载的效果。 但是scroll事件会有抖动。也就是说页面滚动到了底部，去加载数据会频繁执行二、三次。

二、js resize、scroll函数节流与函数防抖

参考博客：

一、js实现滚动条滚动到页面底部继续加载

二、js resize、scroll函数节流与函数防抖

js实现滚动条滚动到页面底部继续加载

猜你喜欢