前言
各位大佬们好呀！最近在复习一些前端的知识，然后遇到了无限下拉列表。之前在使用的时候都是直接使用ElmentUI的无限下拉列表，然后现在又遇到了这个问题，就想着能不能自己手动实现一下这个功能，所以就有了这篇文章。
要实现无限下拉列表，首先要了解clientHeight、scrollTop和scrollHeight这几个的用处。在这里我就直接给出我的理解了（当然你也可以看一下别的大佬的文章~）
clientHeight = 元素的实际高度（height）+ 内边距（paddingTop+paddingBottom） 小拓展： offsetHeight = 元素的实际高度（height）+ 内边距（padding-top+padding-bottom）+ 边框（border-top+border-bottom）
<style>
.container {
width: 100px;
height: 100px;
padding: 15px 0;
border: 2px solid #000;
/*display:none */
background-color: aquamarine;
}
</style>
<body>
<div class="container"></div>
<script>
let container = document.getElementsByClassName('container')[0];
// 设置了display:none后 clientHeight = 0
console.log('盒子的clientHeight', container.clientHeight); // 130
</script>
</body>
scrollHeight这个理解起来比较emmm...困难？我尽量写的详细一点 先上代码
<style>
.scrollFather {
position: relative;
width: 640px;
height: 640px;
background-color: silver;
/* overflow: hidden; */
}
.scrollSon {
position: absolute;
width: 600px;
height: 600px;
background-color: red;
top: 150px;
right: 0;
}
</style>
<body>
<div class="scrollFather">
<div class="scrollSon"></div>
</div>
<script>
let scrollBox = document.querySelector('.scrollFather');
console.log(scrollBox.scrollHeight); // 750
</script>
</body>
效果图：
简单的概括就是：父盒子加子盒子作为一个整体所占的实际高度
如果子元素超过父盒子的区域（本例子是用定位设置偏移量），scrollHeight = 子元素的clientHeight + 子元素的offsetTop。
如果子元素没有超过父盒子的区域，scrollHeight = 父元素的 clientHeight。
看到这里如果比较迷糊的话，建议你复制一下去看看效果0v0（也有可能是我写的不太好...-_-||| ）；
注：这里只是用盒子来当做例子讲解，后面实现无限下拉的时候会再讲scrollHeight，所以这里看不懂也没事~
scrollTop 先上代码
<style>
.father {
width: 200px;
height: 200px;
background-color: silver;
overflow-y: auto;
}
.son {
width: 183px;
height: 300px;
background-color: antiquewhite;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
<p><span class="show"></span></p>
<button class="btn">点击显示scrollTop值</button>
<script>
let father = document.querySelector('.father');
let son = document.querySelector('.son');
let btn = document.querySelector('.btn');
let show = document.querySelector('.show');
btn.onclick = function() {
show.innerHTML = father.scrollTop
}
</script>
</body>
在这里，由于子元素高度超过父元素的高度，通过通过overflow：auto设置出滚动条
概括：scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
这里的元素中的内容表示的是子元素，子元素通过滚动条下拉，部分内容超出父元素上边界， scrollTop所代表的就是那部分的内容的高度
用图来表示就是
如果你是对这部分内容了解的话，我相信你应该可以理解我在说什么...的吧？
开始实现无限下拉
html部分
<!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>
<style>
div {
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="container"></div>
<script src="./index.js"></script>
</body>
</html>
js部分
let body = document.documentElement || document.body;
let bodyClientHeight = body.clientHeight || window.innerHeight;
window.onscroll = () => {
let curScrollTop = body.scrollTop; // 实时获取当前body的scrollHeight
let bodyScrollHeight = body.scrollHeight; // 实时获取当前body的scrollHeight
// bodyScrollHeight - (bodyClientHeight + curScrollTop) < 100 关键是这一步的计算
if (bodyScrollHeight - (bodyClientHeight + curScrollTop) < 100) {
if (i < 100) { // 限制只有100条数据
let j = i + 5;
for (; i < j; i++) {
container.innerHTML += `<div style='background-color:${randomBgc()}'><span>${i}</span></div>`
}
} else {
document.title = '到底部了'
container.innerHTML += `<p style='text-align:center'><span>没有更多信息了</span></p>`
window.onscroll = null; // 到底部就关闭滚动事件
}
}
}
let container = document.querySelector('.container');
let i = 0;
for (; i < 10; i++) { // 模拟第一次加载,添加十条数据
container.innerHTML += `<div style='background-color:${randomBgc()}'><span>${i}</span></div>`
}
// 随机背景颜色
function randomBgc() {
var r = Math.round(255 * Math.random()).toString(16);
var g = Math.round(255 * Math.random()).toString(16);
var b = Math.round(255 * Math.random()).toString(16);
var rgb2 = "#" + r + g + b;
return rgb2;
}
注：bodyScrollHeight - (bodyClientHeight + curScrollTop) < 100 的意思如下
注：bodyScrollHeight - (bodyClientHeight + curScrollTop)用通俗的话来讲就是：页面底部的高度大小 所以上面 bodyScrollHeight - (bodyClientHeight + curScrollTop) < 100 就是当页面底部的高度大小小于100时进行操作
ps：上面实现的是有限下拉，无限下拉只需要把 数据条数（i<100） 的限制的那部分js代码去掉即可
总结
要实现下拉功能主要还是要了解clientHeight、scrollHeight和scrollTop等的主要用途，上面的整体功能实现的比较简单，并且也有部分代码是参考其他大佬的文章。希望本文章对你有所帮助！
