スクロール進捗バー
スクロール進捗バーは、ページの一番上に固定された細い帯で、読者が今どこまで読み進めたかを横幅の伸びで示すパーツです。仕組みはシンプルで、 scroll イベントのたびに現在のスクロール量を「文書全体の高さからウィンドウ高さを引いた値」で割り、その割合を width のパーセントに反映します。
解説
スクロール進捗バーは、ページの一番上に固定された細い帯で、読者が今どこまで読み進めたかを横幅の伸びで示すパーツです。仕組みはシンプルで、scroll イベントのたびに現在のスクロール量を「文書全体の高さからウィンドウ高さを引いた値」で割り、その割合を width のパーセントに反映します。バー自体は position:fixed と高い z-index で常に最前面に残り、linear-gradient で青から緑へ色が流れるようにしています。
使うと効く場面
- 長文の記事・ブログ・利用規約など、読了率を意識させたいページ
- 1 カラムの縦長ランディングページで現在地の目安を出したいとき
- ドキュメントやマニュアルで「残りどれくらいか」を直感的に伝えたいとき
カスタマイズは background のグラデーションを変えればブランド色に合わせられ、height で太さ、transition の値で追従の滑らかさを調整できます。パフォーマンス面ではイベントが連続して発火するため、重い処理を足すなら間引き（スロットリング）を検討してください。装飾目的の要素なので、スクリーンリーダーには読ませない扱いで問題ありません。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
バーの色を自分のサイトに合わせたいです
CSS の background に指定した linear-gradient の 2 色を変えるだけで色を差し替えられます。単色にしたい場合はグラデーションをやめて background に 1 色を指定してください。
スクロールしてもバーが動かないことがあります
進捗の計算は文書全体の高さを基準にしているため、ページの中身が画面より短いと割る値がゼロに近くなり伸びません。スクロールできる高さがあるページで動作することを確認してください。