Scroll · Moves as you scroll
Reading progress阅读进度
- directional
- predictable
- quiet
A hairline at the top fills as you scroll, and a rail of ticks says how many sections there are and which one you are in. It is not decoration; it answers one question: how much is left.
When to use it
For content that is genuinely long and asks people to commit: terms, a long read, a tutorial, a multi-step form. Do not bolt one onto a page that already fits on one screen — the bar sits near 100% forever and makes people think it is broken. Attach it to whichever container actually scrolls, and never show two progress bars when a page has an inner scrolling region.
Parameters
progress = scrollTop / (scrollHeight − clientHeight) · ticks lit by round(p × 4) · scroll-driven, no easing · ticks 180ms linear
Recipe
Reading progress → 180ms linearwhen scroll-driven, no easingdriven by scroll position , no easingReading progress → progress = scrollTop / (scrollHeight − clientHeight) · ticks lit by round(p × 4) · ticks 180ms linear
One sentence for your AI
Build a reading progress bar: a 3px track across the top of the container with an accent-coloured fill inside it. Progress equals scrollTop over (scrollHeight minus clientHeight); when the maximum is 0 (nothing to scroll) fill 0 rather than letting it go NaN or sit full. Down the right side put one tick per section and light the one you are in: index equals round(p times (sections minus 1)), with only that dot enlarged and brightened and the rest returning to grey. Make the scroll listener passive and never force a layout while scrolling. When nobody is scrolling, walk it down a step at a time, pause at the bottom and return to the top, so the effect is visible at all.