滚动相关 · 滚到哪、变到哪
阅读进度Reading progress
- 有方向
- 可预期
- 安静
顶上一条细线，滚多少填多少；右边几个刻度告诉你「一共几段、现在第几段」。它不制造美感，它解决一个具体问题：这一页还有多长。
什么时候用它
适合真的很长、需要人下决心往下读的内容：条款、长文、教程、多段表单。别在本来就一屏放得下的页面上硬加一条 —— 进度条会永远停在 100% 附近，只会让人怀疑是不是坏了。另外只给「真的在滚」的那个容器挂；页面里套了内部滚动区时，别让两条进度同时出现。
参数
progress = scrollTop / (scrollHeight − clientHeight) · ticks lit by round(p × 4) · scroll-driven, no easing · ticks 180ms linear
配方
阅读进度 → 180ms linear条件 scroll-driven, no easing由滚动位置驱动 , no easing阅读进度 → progress = scrollTop / (scrollHeight − clientHeight) · ticks lit by round(p × 4) · ticks 180ms linear
给 AI 的一句话
做一条阅读进度：容器顶部一条 3px 的轨道，里面一条按比例填充的强调色条。进度等于 scrollTop 除以（scrollHeight 减 clientHeight）；最大值为 0（内容没得滚）时就填 0，不要让它变成 NaN 或一直满格。容器右侧一列与段落数相同的刻度点，滚到哪一段就点亮哪一个：索引等于 round(p 乘（段数 减 1))，只让那一个点变大变亮，其余回到灰色。滚动监听要 passive，滚动过程中不要触发重新布局。没有人在滚的时候，让它自己一格一格往下走、到底停一下再回顶，这样这条动效才看得出来。