JavaScriptH5移动端滚动加载下一页(附带防抖函数,原生写法,JQuery写法)

原生写法

<script>
    /**
  * 防抖函数
  * @param method 事件触发的操作
  * @param delay 触发之后多长时间后执行
  * @returns {Function}
  */
    function debounce(method, delay) {
        let timer = null;
        return function () {
            let self = this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                method.apply(self, args);
            }, delay);
        }
    }

    // 加载函数
    function delFn() {
        console.log('执行了');
    }

    //取进度条到底部距离
    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 = debounce(function () {
        if (getScrollTop() + getClientHeight() > (getScrollHeight() - 200)) {
            //页面已滚动到最底部
            // fun();//页面已滚动到最底部处理
            delFn();
        }
    }, 250)
    </script>

JQuery版本

<script src="https://cdn.bootcdn/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(window).scrollTop();  //获取的是滚动条的垂直偏移 
    $(document).height();  //获取的是文档的高度 
    $(window).height();   //获取的是窗口的可视区域的高度
    /**
 * 防抖函数
 * @param method 事件触发的操作
 * @param delay 触发之后多长时间后执行
 * @returns {Function}
 */
    function debounce(method, delay) {
        let timer = null;
        return function () {
            let self = this, args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                method.apply(self, args);
            }, delay);
        }
    }
    
    // 加载函数
    function delFn() {
        console.log('执行了');
    }
    
    //页面滚动事件
    $(window).scroll(debounce(function () {
        //判断是否滑动到页面底部
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
            // 滑动到底部时可请求下一页的数据并加载，加载可使用append方法
            delFn();
        }
    }, 250));
    </script>