js 监测滚动条触底加载新数据，实现无限刷新内容功能

代码都贴在下面了，里面用了函数防抖，其实实际上并没有用上hhhh。。。。不过还是加上了不想用可以删了就可

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let body = document.querySelector('body')
        let i = 0;
        function loadData() {
            let max = i + 50
            for (i; i < max; i++) {
                let lis = document.createElement('li')
                lis.textContent = i + '-----aaaaaaaa'
                body.append(lis)
            }
        }
        loadData()
        window.addEventListener('scroll', this.handleScroll) // 添加滚动事件
        function handleScroll(e) {
            let relative = 100 // 相对距离
            // console.log(getScrollTop() + getWindowHeight(), getScrollHeight())
            if (getScrollTop() + getWindowHeight() >= getScrollHeight() - relative) {
                // debounce(loadData(), 500, true)
                console.log('touch bottom');
                loadData()
            }
        }
        /**
         * 防反跳。fn函数在最后一次调用时刻的delay毫秒之后执行！
         * @param fn 执行函数
         * @param delay 时间间隔
         * @param isImmediate 为true，debounce会在delay时间间隔的开始时立即调用这个函数
         * @returns {Function}
         */
        function debounce(fn, delay, isImmediate) {
            var timer = null;  //初始化timer，作为计时清除依据
            return function () {
                var context = this;  //获取函数所在作用域this
                var args = arguments;  //取得传入参数
                clearTimeout(timer);
                if (isImmediate && timer === null) {
                    //时间间隔外立即执行
                    fn.apply(context, args);
                    timer = 0;
                    return;
                }
                timer = setTimeout(function () {
                    fn.apply(context, args);
                    timer = null;
                }, delay);
            }
        }
        //滚动条在Y轴上的滚动距离
        function getScrollTop() {
            return scrollTop = document.body.scrollTop + document.documentElement.scrollTop
        }
        //文档的总高度
        function getScrollHeight() {
            return scrollHeight = document.documentElement.scrollHeight
        }
        //浏览器视口的高度
        function getWindowHeight() {
            return document.compatMode == "CSS1Compat" ? windowHeight = document.documentElement.clientHeight : windowHeight = document.body.clientHeight
        }
    </script>
</body>

</html>
posted @ 2022-04-13 17:17  lambertlt  阅读(383)  评论(0)  编辑  收藏  举报