无限滚动Infinite Scroll
滑到底没有出现新案例，是已经看完，还是下一批加载失败了？
无限滚动在读者接近已加载列表末尾时自动请求下一批内容，并追加到原列表。它需要区分已加载、正在请求、失败和真正结束，防止同一批重复请求，并保留手动加载、停止和返回位置的办法。
快看到当前这批的末尾，就接着搬来下一批。没搬成功不能说仓库没货，搬过来的也不要再算第二遍。
展厅不断补上下一排样品；补货延误和已经没有下一排，是两种不同情况。
类比到这里为止：游标只是下一段位置线索，不自动提供快照一致性。数据变化、排序不稳定或接口重复返回，都仍需检查；看见某张卡也不证明读懂。
浏览灵感案例时可连续追加；处理询盘更重视精确定位与返回。无论选哪种方式，打开案例再回来都不应跳到顶部重新找。
下一批的生命周期
- 接近末尾
- 可用 Intersection Observer 观察明确的末尾标记。
- 请求中
- 同一批只保留一次读取，原列表不清空。
- 失败
- 保留游标和旧内容，提供重试，不假装全部看完。
- 成功或结束
- 按稳定 ID 去重追加；后端明确没有下一批才显示结束。
连续浏览仍要能停下来
自动追加不应把键盘焦点强行拉到新内容。保留暂停自动加载和手动继续入口，说明已加载范围；返回详情前的位置也要单独保存和恢复。
课堂只有 9 张虚构卡片，使用本地延迟模拟请求。可切换下一批成功或失败，第二批故意带一张重复卡以便观察去重；不会访问真实客户系统。
继续看项目应用与交付检查
无限滚动 在项目中负责什么
- 什么时候用
- 以连续探索为主，用户不一定需要跳到具体页码的列表中。
- 它解决什么
- 减少连续浏览的显式翻页动作，让已经读到的内容保持连续。
- 它不负责什么
- 不是所有目录都适合无限滚动。需要可达的页尾与手动入口；公开内容还应有可抓取页面路径，不能假设爬虫会像人一样滚动。
- 放进真实项目
- 灵感案例流可连续加载，但询盘管理仍保留总量、定位和返回位置。
无限滚动适合探索内容，管理任务还要保留定位、总量和返回能力
浏览案例图片可以不断加载；销售处理第 126 条询盘后必须能回到原位置并知道还有多少未处理。
- 01
先确认任务是探索还是精确管理。
- 02
使用游标避免重复和跳项。
- 03
保存位置并为页脚、键盘提供可达方式。
追加不覆盖，失败不当结束，同一批别重复。
容易混淆的地方
无限滚动是触发加载的交互方式，不是无限数据、不等于虚拟列表，也不保证图片和内容自动懒加载。
前 3 张案例已显示，下一批读取失败。此时怎样表示并恢复？
你可以这样告诉 AI Agent
我在处理这件事：灵感案例流可连续加载，但询盘管理仍保留总量、定位和返回位置。请以“无限滚动”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践