倒推加载的核心逻辑是监听滚动容器顶部触达事件以加载更早数据。需对固定高度容器设overflow-y:auto，用IntersectionObserver监听顶部占位符，配合loading锁与scrollTop补偿实现平滑prepend。
倒推加载（无限上拉）的核心逻辑是什么
倒推加载不是“从底部往上翻页”，而是用户滚动到容器顶部时，触发加载更早的数据（比如聊天记录里往上翻历史消息、评论区看更早的回复）。关键在于监听容器的 scrollTop 变化，而不是 window 滚动——因为 index.html 本身通常不是滚动容器，真正滚动的是某个 div（比如 class="chat-list" 或 id="comments"）。
- 必须给目标容器设置固定高度 +
overflow-y: auto，否则无法触发scroll事件 - 监听的是容器的
scroll事件，不是window的 - 判断“到达顶部”的条件是：
element.scrollTop === 0，但要注意：首次加载后立即触发会导致重复请求，得加防抖或状态锁
如何用原生 JavaScript 实现防抖+状态控制
直接监听 scroll 容易高频触发，尤其在 iOS Safari 上滚动惯性大。推荐用 IntersectionObserver 观察一个“顶部占位元素”，或用节流 + 加载中锁。
<div id="list-container" style="height: 500px; overflow-y: auto;"> <div id="top-trigger" style="height: 1px;"></div> <!-- 数据列表 --> </div>
然后用 IntersectionObserver 监听 #top-trigger 是否进入视口顶部：
- 创建 observer 时传入
{ root: container, threshold: 0, rootMargin: '0px 0px -100% 0px' }，让触发点提前在容器顶部上方出现 - 回调中检查
isIntersecting且当前未在加载（!loading），再调用loadEarlierData() - 加载开始前设
loading = true，成功/失败后重置，避免并发请求
为什么用 prepend 而不是 append？数据顺序怎么保证
倒推加载的数据必须插在现有列表最前面，但直接用 element.prepend() 会把新 DOM 插到最顶，导致滚动位置突变（用户看到页面“跳”一下）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：先记录当前
scrollTop，再插入新内容，最后按新增内容高度补偿scrollTop - 示例：假设插入了 5 条消息，总高 200px，则执行
container.scrollTop += 200 - 更稳妥方案：用
scrollIntoView({ block: 'start', behavior: 'auto' })配合position: sticky占位符，但兼容性略差
fetch 请求失败或分页参数怎么处理
倒推加载的分页参数通常是 before_id 或 max_id（即当前最早一条数据的 ID），而不是传统 page=2。
- 首次加载后，保存第一条数据的
id作为下一次请求的before_id - 接口返回空数组时，应停用触发器（
observer.unobserve(triggerEl)），避免无效轮询 - 网络失败需提供重试机制，比如按钮式手动重试（
<button onclick="retryLoad()">加载更早内容</button>），不自动重试 - 注意服务端是否支持按时间戳倒序分页；若只支持正向分页（
offset/limit），倒推需改用ORDER BY created_at DESC LIMIT n OFFSET m，性能可能较差
实际滚动体验是否顺滑，取决于 DOM 插入方式和高度补偿精度。很多项目卡在这里：不是逻辑写不对，而是没同步更新容器的滚动偏移量。
