代码都贴在下面了，里面用了函数防抖，其实实际上并没有用上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>