INTERACTION
无限滚动Infinite Scroll
滚到底部自动加载下一页，底部一枚小 spinner 代替"下一页"按钮。
效果预览
第 8 条内容加载完成
第 9 条内容加载完成
正在加载更多…
适合用在哪
信息流、图片墙、商品瀑布流、评论列表。
容易踩的坑
- 加载上千条后 DOM 节点超过 5000 个，滚动掉帧，应配合虚拟滚动回收。
- 返回上一页时滚动位置和已加载内容丢失，用户只能从头再刷。
- 新内容追加时没有 aria-live 提示，读屏用户不知道列表已变长。
设计提示词 · Prompt
无限滚动（Infinite Scroll）：IntersectionObserver 监听列表底部的哨兵元素（rootMargin 提前 400-800px 预加载），进入视口即请求下一页并 append。加载中在底部显示 spinner 行；没有更多时显示"到底了 ~"。必配兜底：手动"加载更多"按钮（IntersectionObserver 失效时）、加载失败重试、URL 同步页码（可分享/后退）。注意：内容型页面（找内容）适合无限滚动；任务型页面（找特定项）用分页更好——无限滚动让页脚永远够不着。
Infinite Scroll: An IntersectionObserver watches a sentinel element at the bottom of the list (rootMargin 400-800px ahead for preloading); once it enters the viewport, request the next page and append. While loading, show a spinner row at the bottom; when there's nothing more, show "You've reached the end ~". Required fallbacks: a manual "Load more" button (when IntersectionObserver fails), retry on load failure, URL-synced page number (shareable / back-friendly). Note: content-browsing pages (finding content) suit infinite scroll; task pages (finding a specific item) are better with pagination — infinite scroll makes the footer forever unreachable.
常见搭配
同一页面里经常和「无限滚动」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-infscroll"> <div class="d-infscroll__row"><b>第 8 条</b>内容加载完成</div> <div class="d-infscroll__row"><b>第 9 条</b>内容加载完成</div> <div class="d-infscroll__loading"><span class="d-infscroll__spin"></span>正在加载更多…</div> </div>