上拉加载本质是分页逻辑的滚动触发形式，核心在于页码管理、请求节流、DOM更新方式及前后端分页语义对齐。
上拉加载和分页数据本质是同一套逻辑的两种触发方式
上拉加载不是独立于分页的“新功能”，它只是把传统 page 参数的递增行为，从点击按钮换成了滚动到底部自动触发。后端接口通常完全一样：都依赖 page 和 limit（或 offset/size）做数据切片。关键区别在于前端如何管理当前页码、是否允许重复请求、以及如何拼接新数据。
滚动监听 + 页码递增是最常见且稳定的实现路径
别用“是否触底”这种模糊判断，直接监听 scroll 事件，结合 document.documentElement.scrollHeight、window.innerHeight 和 window.scrollY 计算剩余距离。触发阈值建议设为 100–200px，避免抖动误触。
- 每次成功加载后必须手动递增
currentPage变量，不能靠 DOM 滚动位置反推页码 - 请求前加锁：
isLoading置为true，响应后才置false，否则快速滚动会触发多次相同页码请求 - 后端返回空数组或
hasMore: false时，要置canLoadMore = false并移除监听，否则下拉还会继续触发
直接拼接 DOM 容易导致列表错位和事件丢失
用 innerHTML += 或 insertAdjacentHTML 追加内容看似简单，但会重置所有已绑定的事件监听器（比如列表项里的删除按钮），也会让浏览器重新计算整个列表布局，造成卡顿或滚动跳变。
- 推荐用
DocumentFragment批量创建节点再一次性append()到容器末尾 - 如果用了框架（如 Vue/React），务必走响应式更新，不要绕过框架直接操作 DOM
- 滚动容器必须是明确设置了
overflow-y: auto的元素，且高度固定或受限；用body滚动时，Safari 对scrollY的读取有延迟，容易漏触发
服务端分页参数不一致会导致上拉“重复加载同一页”
常见坑是前端传 page=2，后端却按 offset=20（即跳过前 20 条）处理，而没校验总条数。结果第 2 页加载完，用户继续上拉又传 page=3，后端却因总数不足 30 条，返回了和第 2 页重复的数据。
立即学习“前端免费学习笔记（深入）”；
- 后端应统一使用
offset+limit，或严格校验page * limit <= total - 前端收到响应后，应检查
data.length < limit，作为“到底了”的辅助判断，比单纯依赖后端hasMore更可靠 - 如果接口支持游标分页（
cursor），优先用它替代页码——避免因中间数据插入/删除导致的错页问题
实际跑通的关键不在滚动检测多精准，而在页码状态、请求节流、DOM 更新方式、前后端分页语义这四点是否对齐。少一个，就会出现白屏、重复、卡死或无限加载。
