实现无限滚动需监听滚动事件，通过比较滚动位置与页面高度判断触底，在接近底部时触发数据加载。使用防抖函数控制请求频率，避免频繁调用。维护页码和加载状态，动态追加新数据并显示loading提示。示例中结合scrollTop、clientHeight和scrollHeight判断触发时机，并通过debounce优化性能。初始加载后持续监听滚动，数据为空时移除事件防止重复请求。该方案适用于信息流等长列表场景，提升用户体验。
实现无限滚动加载更多内容，关键在于监听用户滚动行为，在接近页面底部时自动请求新数据并追加到列表中。这种方式提升用户体验，避免手动点击“加载更多”按钮。以下是清晰、实用的实现方法。
1. 监听滚动事件判断是否触底
通过监听 window 的 scroll 事件，结合页面总高度、已滚动距离和视口高度，判断用户是否接近页面底部。
核心代码逻辑：
- 使用 window.innerHeight 获取可视区域高度
- 使用 document.documentElement.scrollHeight 获取页面总高度
- 使用 window.scrollY 获取垂直滚动偏移量
- 当 scrollY + innerHeight >= scrollHeight - offset 时触发加载
2. 防抖控制请求频率
滚动事件频繁触发，需使用防抖（debounce）避免重复请求。
立即学习“Java免费学习笔记（深入）”；
简单防抖函数示例：
function debounce(func, delay) { let timer; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; }
将加载逻辑包裹在防抖函数中，确保用户持续滚动时不频繁发起请求。
3. 动态加载并插入数据
定义加载函数，模拟或调用真实接口获取数据，并将其渲染后插入容器。
- 维护一个页码变量（如 page = 1），每次加载后递增
- 请求成功后将新内容用 innerHTML += 或 appendChild 添加到列表
- 可添加 loading 提示，请求完成后隐藏
4. 完整简化示例
假设有一个内容容器 #list 和 loading 状态提示：
const list = document.getElementById('list'); let page = 1; let isLoading = false;async function loadMore() {
if (isLoading) return;
isLoading = true;
// 模拟请求
const res = await fetch(/api/data?page=${page});
const data = await res.json();
if (data.length === 0) { window.removeEventListener('scroll', handleScroll); return; }
data.forEach(item => { const div = document.createElement('div'); div.textContent = item.title; list.appendChild(div); });
page++; isLoading = false; }
function handleScroll() { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight - 100) { loadMore(); } }
const debouncedScroll = debounce(handleScroll, 200); window.addEventListener('scroll', debouncedScroll); // 初始加载 loadMore();
基本上就这些。注意控制请求状态、合理设置触底阈值、避免内存泄漏。无限滚动适合内容流场景，如信息流、商品列表等，不复杂但容易忽略细节。
