通过监听页面滚动事件，在接近底部时调用 fetch 请求下一页数据并追加到 dom 中即可实现。核心做法是维护一个页码变量，每次请求携带 ?page=n 参数，并在响应后更新页码；若返回数据为空或不足一页则停止加载。
如何检测用户已滚动到底部
使用 window.innerHeight、document.documentElement.scrollTop 和 document.documentElement.scrollHeight 计算当前可视区域与文档总高度的关系。当剩余距离小于阈值（如 100px）时触发加载逻辑。
const threshold = 100;
function isNearBottom() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const windowHeight = window.innerHeight;
const docHeight = document.documentElement.scrollHeight;
return (docHeight - scrollTop - windowHeight) <= threshold;
}该函数返回布尔值，用于判断是否应发起下一次请求。实际使用时需绑定到 scroll 事件监听器中，并建议配合防抖或节流策略避免频繁触发。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
如何管理分页状态与终止条件
维护一个全局的 currentPage 变量初始为 1，每次成功加载后将 currentPage++。同时设置一个标志位 isLoading 防止重复请求。当服务器返回空数组或长度小于每页固定数量时，认为无更多数据，可移除滚动监听或禁用加载按钮。
let currentPage = 1;
let isLoading = false;
const pageSize = 10;
async function loadMore() {
if (isLoading) return;
isLoading = true;
try {
const res = await fetch(`/api/items?page=${currentPage}&size=${pageSize}`);
const data = await res.json();
if (data.length === 0) {
console.log('No more items');
window.removeEventListener('scroll', handleScroll);
return;
}
appendItems(data);
currentPage++;
} catch (err) {
console.error('Fetch failed:', err);
} finally {
isLoading = false;
}
}上述代码展示了完整的异步加载流程：检查锁、发起请求、处理响应、更新状态、异常捕获。其中 appendItems() 需自行实现 DOM 插入逻辑。注意 fetch 不会自动重试失败请求，需根据业务需求决定是否需要重试机制。
