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 阅读(409) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· chrome 下鼠标点击BUG!!!! 涉及 mousedown, mousemove, mouseup

· echarts 下用关系图实现拓扑图结构（树形，星型，网状，总线，环形）

· js 防抖

· 一个简单的浏览器页面滚动防抖

· JS-54 防抖（debounce）

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

历史上的今天：
2020-04-13 js 查看脚本运行时间的办法

公告

昵称： lambertlt
园龄： 4年11个月
粉丝： 18
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

lambert's blog

停杯投箸不能食，拔剑四顾心茫然

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

公告

搜索

我的标签

阅读排行榜

	<!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>