1. 简介
无限滚动加载是指在页面滚动至末尾时自动进行下一部分数据加载，实现在用户浏览过程中不断获取更多数据的效果。在实际开发中，无限滚动加载功能通常应用于文章列表、商品列表、社交媒体等长列表页面。
2. 实现
实现无限滚动加载的方法有多种，例如使用jQuery、Vue、React等各类前端框架，但在这篇文章中，我们将使用纯JavaScript来实现。实现的基本思路是监听页面滚动事件，当滚动到页面底部时触发数据的加载。
2.1 监听滚动事件
我们需要通过监听window对象的scroll事件，判断用户是否已经滚动到了页面底部。监听scroll事件的代码如下：
window.addEventListener('scroll', function() {
// 判断滚动条是否已经到达页面底部
});
该代码段中，window.addEventListener('scroll', function() {})为监听scroll事件的方法，其中function() {}是回调函数。
2.2 判断是否到达底部
接下来，我们需要判断页面滚动是否到底部。我们可以根据以下方法来判断：
滚动条滚动的距离scrollY+当前窗口的高度innerHeight是否等于页面的高度document.body.clientHeight
滚动条滚动的距离scrollY+当前窗口的高度innerHeight是否等于文档的高度document.body.scrollHeight
这里我们使用第二种方法。
window.addEventListener('scroll', function() {
if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
// 已到达页面底部
}
});
2.3 触发数据加载
在判断当前是否到底部时，我们需要在满足条件时触发数据加载的功能。我们可以通过调用后台接口，获取新的数据（通常是JSON格式数据），并使用JavaScript将其渲染到页面上。
window.addEventListener('scroll', function() {
if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
// 已到达页面底部，开始加载新数据
fetch('api/getData.php')
.then(function(response) {
return response.json();
})
.then(function(data) {
// 将数据渲染到页面上
});
}
});
该代码段中，fetch('api/getData.php')是一个Promise对象，用于发起异步请求，并返回一个response对象。我们使用then()方法将该对象转换为JSON格式，并在成功时执行回调函数：将获取到的数据在页面上进行渲染。
2.4 避免重复加载
在实现无限滚动加载时，我们需要注意避免重复加载的情况。我们可以通过设置标志位，判断当前是否正在加载中，避免重复发起请求。
var isLoading = false;
window.addEventListener('scroll', function() {
if (isLoading) return;
if (window.scrollY + window.innerHeight === document.body.scrollHeight) {
// 设置加载中标志位
isLoading = true;
// 已到达页面底部，开始加载新数据
fetch('api/getData.php')
.then(function(response) {
return response.json();
})
.then(function(data) {
// 将数据渲染到页面上
// 清除加载中标志位
isLoading = false;
});
}
});