スクロール進捗バー

解説

スクロール進捗バーは、ページをどこまで読んだかを画面上部の細い帯で示す UI です。このサンプルは scroll イベントで現在のスクロール量を取得し、ドキュメント全体の高さからウィンドウの高さを引いた値で割って割合を計算、その値を帯の width にパーセントで反映します。イベントには passive:true を指定してスクロール性能への影響を抑え、帯は position:fixed で常に最上部に固定されます。グラデーション背景で視認性を確保しています。

使う場面

• 長文のブログ記事やニュース記事の読了率の可視化
• 利用規約・ドキュメントなど縦に長いページ
• ランディングページで読み進めを促したいとき

色を変えたいときは linear-gradient の2色を差し替えるだけです。太さは height で調整できます。transition をかけているため幅の変化が滑らかですが、より即時に追従させたい場合は短くするか外します。記事のように縦に長いページでこそ価値が出る部品で、画面に収まる短いページではほとんど動きません。固定ヘッダーがある場合は top や z-index の重なりを確認してください。