スクロール量を示すバー（CSS のみ）
JavaScript なし・CSS の animation-timeline: scroll() だけでページのスクロール進捗を可視化するバーを実装。Intersection Observer 不要。
解説
ページ上部に固定された細いバーが、スクロール量に応じて左から右へ 0% から 100% まで伸びる「読み進み度」インジケーターです。注目すべきは、これを JavaScript のスクロールイベント監視なしで実現している点で、CSS の animation-timeline:scroll() を使い、アニメーションの進行をページのスクロール位置そのものに結び付けています。バーは transform:scaleX() で横方向に拡大するため、再描画の負荷が小さく滑らかに動きます。
長い記事やドキュメント、利用規約ページなど、読者が「あとどれくらいで読み終わるか」を知りたいコンテンツに向きます。従来はスクロール量を JavaScript で常時計算する必要があり、処理が重くなりがちでしたが、この方式はブラウザがスクロールと描画をまとめて最適化してくれるため軽快です。
カスタマイズと注意点
- バーの色はグラデーションの値を、太さは
heightを変えれば調整できます。 - バーを下端に置きたいなら
topをbottomに変えます。 animation-timelineはまだ対応ブラウザが限られます。未対応環境ではバーが出ないだけで本文の閲覧に支障はないため、装飾として安全に足せます。動きに敏感な人へ配慮するならprefers-reduced-motionでバーを隠す指定を加えると親切です。
よくある質問
JavaScript を使わずに進捗を出せるのですか？
はい。CSS の animation-timeline:scroll() を使うと、アニメーションの進行をスクロール位置に直接連動させられます。スクロールイベントを JavaScript で監視する必要がなく、ブラウザが描画ごと最適化するため軽快に動きます。
どのブラウザで動きますか？
スクロール連動アニメーションに対応した比較的新しい Chrome 系ブラウザなどで動作します。未対応のブラウザではバーが表示されないだけで、ページ本体の閲覧には影響しないので、装飾的な機能として安心して使えます。