スクロール進捗バー

解説

スクロール進捗バーは、ページの一番上に固定された細い帯が読み進めた割合だけ横に伸びていく、読書の現在地を示す表示です。仕組みは scroll イベントで現在のスクロール量を取得し、ページ全体の高さから表示領域の高さを引いた「スクロール可能な量」で割って百分率を出し、その値をバーの width に反映します。バー本体は position: fixed で最上部に貼り付け、グラデーションで色を付けています。

向いている場面

• 長文の記事やブログで、残りの分量を直感的に伝えたいとき
• 利用規約や手順ガイドなど、最後まで読ませたいページ
• ランディングページで読了率を可視化し離脱を抑えたいとき

色はグラデーションの 2 色を差し替えるだけでブランドに合わせられ、太さは高さの数値で調整します。パフォーマンス面では scroll リスナーに passive: true を付けてスクロールの引っかかりを防いでいる点がポイントです。さらに負荷を抑えたい場合は requestAnimationFrame でまとめて更新する方法もあります。装飾的な要素なので読み上げ対象から外し、本文の理解を邪魔しない配色にしてください。

使用例・適したシーン

• LP の演出強化
• 記事の読了率向上
• ストーリーテリング表現