スクロール · スクロールで変わる
読書の進捗阅读进度
- 方向性
- 予測可能
- 静か
上部の細い線がスクロール量に応じて伸び、右の目盛りが全体の何番目かを示します。装飾ではなく「あとどれくらいか」に答えます。
使いどころ
本当に長く、読み進める覚悟が要る内容に向きます。規約、長文、チュートリアル、複数段のフォームなどです。1 画面に収まるページに無理に付けないでください。バーはほぼ 100% のまま止まり、壊れていると思うだけです。実際にスクロールする容器にだけ付け、ページ内に内部スクロール領域がある場合は 2 本同時に出さないでください。
パラメータ
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 にし、スクロール中に再レイアウトを起こさないようにします。誰もスクロールしていないときは、1 段ずつ自動で下へ進み、最下部で少し止まって先頭へ戻します。そうして初めてこの動きが見えます。