背景
在日常开发过程中，我们会遇到图片懒加载的功能，基本原理是，滚动条滚动到底部后再次获取数据进行渲染。
那怎么判断滚动条是否滚动到底部呢？滚动条滚动到底部触发时间的时机和方法又该怎样定义？
针对以上问题我做了以下总结：
如何判断滚动条已经滚动到底部
先看一张图片解析
从图中不难看出：
滚动条滚动的最大距离+父盒子的高度 = 子盒子的高度；
也就是说子盒子的高度-父盒子的高度>=滚动距离时，滚动条触底；
那如何获取盒子的高度和滚动距离
大多数情况下子元素的高度是不确定的，会随着图片的加载子元素的高度越来越高，
我们可以通过
elemet.scrollHeight 获取子盒子的高度；
elemet.scrollTop 获取滚动距离；
elemet .clientHeight 获取父盒子的高度；
参考
示例代码
HTML
html
<!DOCTYPE html>
<html lang="CH-EN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>flex</title>
</head>
<body>
<div class="container">
<div class="item">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
</body>
</html>js
javascript
<script>
window.onload = () => {
// 基本思路
// 滚动体条所能滚动的最大高度 + continer的高度 = 子盒子（item）的高度；
const container = document.querySelector(".container");
console.dir(container);
const item = document.querySelector(".item");
container.addEventListener("scroll",() => {
// 父盒子的高度
const clientHeight = container.clientHeight;
// 子盒子的高度（滚动盒子的高度）
const scrollHeight = container.scrollHeight;
// 滚动的最大距离
const scrollHeight_clientHeight = scrollHeight - clientHeight;
// 实时滚动距离
const scrollTop = container.scrollTop;
// 滚动的最大距离小于等于实时滚动距离时，滚动到了底部
if(scrollHeight_clientHeight <= scrollTop){
console.log("滚动到底部");
}
})
};
</script>style
css
<style>
body,
html {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 10px;
background-color: gray;
}
::-webkit-scrollbar-thumb {
background-color: black;
border-radius: 5px;
}
.container {
height: 500px;
width: 400px;
margin: 100px auto;
background-color: rgb(6, 100, 64);
border: blue 5px solid;
overflow: auto;
}
.item {
height: 800px;
width: 200px;
margin: 0 auto;
color: #fff;
line-height: 200px;
overflow: hidden;
background-color: rgb(235, 77, 77);
}
</style>线上示例