无限滚动列表是指在滚动到页面底部时，自动加载更多数据，以实现列表的无限扩充。这在一些需要大量展示数据的网站中非常常见。下面介绍如何利用JavaScript实现无限滚动列表效果。
window.addEventListener('scroll', function() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadData();
}
});
let loadedIds = [];
function loadData() {
let xhr = new XMLHttpRequest();
let page = loadedIds.length + 1;
xhr.open('GET', '/data?page=' + page);
xhr.onload = function() {
let data = JSON.parse(xhr.responseText);
data.forEach(function(item) {
if (!loadedIds.includes(item.id)) {
loadedIds.push(item.id);
addItemToList(item);
}
});
};
xhr.send();
}
function addItemToList(item) {
let li = document.createElement('li');
li.textContent = item.name;
document.querySelector('#list').appendChild(li);
}
以上代码监听了scroll事件，当滚动到页面底部时，调用loadData()函数。loadData()函数向服务器请求新的数据，并将数据添加到列表中。为了避免重复加载数据，使用loadedIds数组记录已经加载过的数据的id。
在实际项目中，需要根据具体需求进行修改。例如，可以添加loading动画，提高用户体验；可以在加载数据时禁用滚动事件，避免用户频繁滚动导致重复加载。