滚动进度指示 · Scroll Progress Indicator
英文：Scroll Progress Indicator
动效与交互难度：入门 ★
🗣️一句话大白话
页面顶部的细进度条（或侧边章节指示点），显示你读到全文的百分之几。长页的“方向感”配件。滚动进度让用户知道“还有多少”：顶部细条随滚动增长，或右侧小圆点标记章节位置。告诉 AI“顶部 3px 进度条、读了多少显示多少”即可。章节指示点适合多章节长文，点击可跳转。细节：进度条颜色要跟主题一致，别喧宾夺主。
🎬真实场景
长文、文档站、作品集、多章节页面
📮你可以这样说
「【图像模型版】在页面顶部加一条滚动进度条：细线（3px）随阅读进度从左到右填充，颜色与品牌色一致；有章节时右侧加指示点，当前章节高亮。 【HTML/CSS/JS 版】[进度条] fixed 顶部，宽度 = (scrollTop / (scrollHeight - clientHeight)) × 100%，监听 scroll 用 rAF 节流。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：进度条=加载进度；这是“阅读进度”，与内容加载无关
- ▸页面很短（<1 屏）时不需要进度条
🚫什么时候别用
- ✗短页面（一屏内）
- ✗已有内置滚动条反馈的列表
🧩常见变体
顶部细条侧边章节点底部进度
💡小贴士
- ✦进度条高度 2-4px 足够，别做成大色块
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗