Scroll progress rail

A document with a vertical rail on the right: section nodes at their real start positions, a fill and a thumb that are the scroll position itself. Scroll back and it goes back; stop and it stops exactly there, with a 56% pill on the thumb.

What it is

A long document with a slim rail on the side that is more than a scrollbar: its markers sit exactly where each chapter starts, it fills as you read, and the percentage you see is the truth of where you are. Scroll back and it goes back; stop and it waits. Built for specs, long-form articles, course material and legal pages — anywhere a reader needs to know how far there is to go.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 8 集「8 个高级交互提升 App 和小程序的质感差别」· 02 滚动带着进度走 Scroll Driven