test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            height: 100px;
        }

        li:nth-child(2n) {
            background-color: pink;
        }

        li:nth-child(2n+1) {
            background-color: green;
        }

        /* .box {
            height: 100vh;
            overflow: auto;
        } */
    </style>
</head>

<body>
    <div class="box">
        <ul class="listmsg">

        </ul>
        <div class="loadmsg"></div>
    </div>
    <script src="./js/loadMore.js"></script>
    <script>
        var listMsg = document.querySelector('.listmsg');
        // 上拉加载
        var page = 0;
        var loadEl = new LoadMore({
            loadElement: '.loadmsg',
            triggerHeight: 50,
            firstPageLoad: true,
            callback: function () {
                setTimeout(() => {
                    page++;
                    let htmlStr = '';
                    for (let i = 0; i < 10; i++) {
                        let liEl = document.createElement('li');
                        liEl.innerText = page * 10 + i;
                        listMsg.appendChild(liEl);
                    };

                    if (document.querySelectorAll('.listmsg li').length > 50) {
                        loadEl.loadFinish();

                    } else {
                        loadEl.loadRefresh();
                    }

                }, 1000);
            }
        })
    </script>
</body>

</html>

loadMore.js

;

function LoadMore({
    loadElement = '.load', // 提示文本dom
    triggerHeight = 50, // 距离底部触发加载的高度
    scrollElement = 'body', // 滚动的元素
    firstPageLoad = false, // 是否首屏加载
    callback
}) {

    this.allowLoad = true; // 是否允许加载新数据
    this.finish = false; // 是否加载结束
    this.scrollElement = document.querySelector(scrollElement);
    this.loadEl = document.querySelector(loadElement);

    // 加载状态文案
    let statusText = {
        loading: '正在加载~',
        waiting: '上拉加载~',
        fail: '加载失败~',
        finish: '加载结束~'
    };

    if (firstPageLoad) {
        this.loadEl.innerText = statusText.loading;
        callback && callback(); // 首屏加载
    };

    // 注册监听元素滚动事件
    this.scrollElement.onscroll = (e) => {

        // 距离底部的高度
        let toBottomDistance = 0;
        if (scrollElement == 'body') {
            toBottomDistance = this.scrollElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        } else {
            toBottomDistance = this.scrollElement.scrollHeight - this.scrollElement.scrollTop - this.scrollElement.offsetHeight;;
        };

        // 是否满足加载条件
        if (!this.finish && this.allowLoad) {
            if (toBottomDistance <= triggerHeight) {
                // console.log('触底');
                this.allowLoad = false;
                this.loadEl.innerText = statusText.loading;
                callback && callback();
            }
        };
    };

    // 加载完成
    this.loadRefresh = () => {
        this.allowLoad = true;
        this.loadEl.innerText = statusText.loading;
    };

    // 加载失败
    this.loadFail = () => {
        this.loadEl.innerText = statusText.fail;
    };

    // 加载结束(全部数据加载完毕)
    this.loadFinish = () => {
        this.finish = true;
        this.loadEl.innerText = statusText.finish;
    }
};