翻页加载需确保状态同步、DOM更新安全性与滚动位置稳定。核心包括：fetch+pushState实现URL同步；用insertAdjacentHTML安全更新DOM；按钮防连点；Intersection Observer精准触发无限滚动；服务端返回结束标识；手动分页时准确切片DOM并读取URL初始页码。
翻页加载不是“加个按钮就行”，核心在于状态同步、DOM 更新安全性和滚动位置稳定性。不处理这三点，用户刷新页面就回到第一页、点两次按钮发两遍请求、加载后页面突然往上跳一截——全是高频问题。
fetch + pushState 实现带 URL 同步的下一页
点击「下一页」不只是换内容，还要让地址栏变、能分享、刷新不丢页。直接改 innerHTML 会执行脚本、丢失事件绑定，且没做错误拦截时 500 错误会静默失败。
- 用
fetch(`/api/list?page=${nextPage}`)请求，必须检查response.ok和response.headers.get("content-type")?.includes("json") - 成功后调用
history.pushState({ page: nextPage }, "", `?page=${nextPage}`)，否则用户复制链接或刷新就回到第一页 - 更新 DOM 时别用
innerHTML = data，优先用insertAdjacentHTML("beforeend", data)并确保插入区域是封闭容器（如id="list-container"），避免污染外层结构 - 按钮点击后立刻设
button.disabled = true+ 添加loadingclass，防止连点
Intersection Observer 替代 scroll 监听实现无限滚动
用 window.onscroll 判断“是否到底部”在图片懒加载、广告插入后极易误判，document.body.scrollHeight 会动态抖动。Intersection Observer 是浏览器原生方案，性能好、触发准。
- 在列表末尾放一个占位
<div id="sentinel"></div>，始终保留在 DOM 中（不要每次加载后删掉再重建） - 初始化 observer 时传
{ rootMargin: "0px 0px 200px 0px" }，提前 200px 触发，避免用户感知卡顿 - 回调里先
observer.unobserve(sentinel)，等新内容插入完成后再observer.observe(sentinel)，防止重复触发 - 服务端必须返回明确的结束标识，比如
is_last_page: true或next_cursor: null，不能只靠data.length === 0判定到底
手动分页渲染 HTML 内容块（无后端）
如果只是把一段长 HTML 拆成几页展示（比如电子书、说明文档），不需要请求接口，重点是 DOM 切片准确、页码状态可控、按钮禁用逻辑严密。
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById("paginated-content").children获取子节点，别用childNodes——它包含空白文本节点，会导致页数计算错误 - 每页元素数建议固定为
pageSize = 5这类整数，避免用高度切分（不同字体/缩放下高度不一致） - 渲染函数里先
container.innerHTML = ""清空，再用appendChild()逐个挂载，比字符串拼接更安全 - 页码变量
currentPage必须是闭包内受控变量，别暴露到全局；按钮禁用逻辑写成prevBtn.disabled = currentPage 和 <code>nextBtn.disabled = currentPage >= totalPages
最常被忽略的是：页面加载时从 URL 参数读取初始页码。不写这句 const page = new URL(window.location).searchParams.get("page") || "1"，用户点开链接永远从第一页开始——哪怕你已经在 history.pushState 里写了十次。这不是锦上添花，是翻页功能成立的前提。
