003_progress-bar
ページ最上部に固定したバーが、読み進めた割合（読了率）に
連動して左から右へ伸びる実装です。対応ブラウザでは
animation-timeline: scroll() によって
JS なし・CSS だけでスクロール進捗に連動します。
この機能に未対応のブラウザでは、scroll イベントと
requestAnimationFrame を使った軽量な JS が同じ進捗を計算して
バーを更新します（フォールバック）。
OS の「視差効果を減らす」設定が有効な場合は、進捗に追従する動きを止めます。
下方向にスクロールして、バーが伸びていく様子を確認してください。
セクション 1
ここからスクロールを始めると、上部のバーが少しずつ右へ伸び始めます。 進捗率はページ全体に対する現在のスクロール位置の割合です。
セクション 2
対応ブラウザでは、このバーの動きは CSS の
animation-timeline: scroll() がスクロール位置を
タイムラインとして扱うことで実現しています。JS は一切関与しません。
セクション 3
未対応ブラウザでは、scroll イベントを
requestAnimationFrame でフレーム同期に間引きしながら、
読了率を計算してバーの幅（実際は scaleX）を更新します。
セクション 4
CSS とJS は二重に動かないよう、JS 側で
CSS.supports('animation-timeline', 'scroll()') を判定し、
CSS で動く環境では JS はリスナーを張りません。
セクション 5
ページの最下部に近づくにつれてバーは右端へ達し、読了率はおよそ 100% になります。短いページでは進捗の変化が分かりにくいため、 このデモでは縦に長いダミーコンテンツを置いています。
セクション 6
最後まで読み終えると、バーは画面幅いっぱいまで伸びきります。 ここがページの終端です。