“加载更多”按钮与无限滚动触发区域是两种交互模式的载体，前者需防默认行为、同步禁用状态，后者须设阈值、用intersectionobserver观察最后一项并共用hasmore状态。
“加载更多”按钮结构和无限滚动触发区域不是二选一，而是两种不同交互模式的底层载体——按钮是显式、可控的触发点；无限滚动的触发区域则是隐式、连续的判断边界。关键不在“怎么写HTML”，而在“怎么让这个区域不误判、不漏判、不卡死”。
按钮结构必须带 preventDefault
点击无反应或页面跳转，90% 是没调 event.preventDefault()。尤其当按钮在 <form></form> 里，或用了 <a href="#"></a> 包裹时，浏览器会按默认语义提交或跳转。
- 用原生
<button type="button"></button>最省心，type 属性明确禁用默认行为 - 若用
<a></a>，必须加event.preventDefault()，且建议加role="button"和tabindex="0"保可访问性 - 按钮禁用逻辑要同步 UI 和状态：
button.disabled = true+button.classList.add('is-loading')，避免连点
无限滚动的触发区域别只算 scrollHeight === scrollTop + innerHeight
iOS Safari、缩放页面、动态插入 DOM 后，document.body.scrollHeight 常滞后于视觉高度，直接等值判断大概率失效。
- 必须加阈值：用
window.scrollY + window.innerHeight >= document.body.scrollHeight - 100替代相等判断 - 监听对象优先选
window，而非某个容器（除非容器设了overflow-y: scroll）；移动端慎用容器滚动，iOS 容器内滚动不触发scroll事件 - 节流不能省：用
requestAnimationFrame包一层，比setTimeout更准，也更顺滑
IntersectionObserver 的触发目标不是“整个列表”，而是“最后一项”
用 IntersectionObserver 实现无限滚动时，观察整个容器是常见错误——它无法感知“新内容插入后，最后一项是否已进入视口”。
- 每次插入新数据后，先
observer.unobserve(lastItem)，再observer.observe(newLastItem) - 触发回调里必须检查
entries[0].isIntersecting，不能只靠entries.length - 阈值设为
{ threshold: 0.01 }，哪怕只露出 1px 也算触发，避免“差一点没到底”的断层感
触发区域和按钮共存时，状态必须统一管理
有些页面同时提供“滚动自动加载”和“底部加载更多按钮”，二者状态若不共享，极易出现按钮还亮着但实际已到底、或滚动已触发加载但按钮仍可点。
- 共用一个
hasMore状态变量，由后端响应字段（如has_more: false）驱动，而不是靠前端猜 - 按钮点击和 IntersectionObserver 触发，走同一套加载逻辑（包括 abort、loading 开关、DOM 插入方式）
- 加载失败时，按钮必须保持可点击，滚动触发区域也应允许重试——别把用户锁死
真正难的不是算出“该不该触发”，而是让触发信号和后端返回的分页语义严丝合缝。只要 has_more 字段没落地，任何“空数组”“404”“超时”都不该让前端擅自决定停止加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
