【2024 更新】純粋な CSS の方法で実現する
CSS では、伝統的なアニメーションは @keyframes 規則で定義され、animation 属性を使用してアニメーションの再生を制御します。これらのアニメーションは通常、時間軸上で動作し、ユーザーがページをスクロールすることとは無関係です。しかし、Chrome 115 またはそれ以降のバージョンのブラウザでは、新しい CSS 属性 animation-timeline: scroll(); がサポートされています。この属性を使用すると、アニメーションをスクロールイベントに関連付けることができ、スクロール駆動のアニメーション効果を実現し、純粋な CSS の方法でページのスクロールバーを実装することができます。
scrollHeight , scrollTop と clientHeight
完全なウェブページ画像
これは完全なウェブページで、赤枠の領域（ブラウザウィンドウに表示される領域）の高さは clientHeight です。赤枠の領域の上部までの距離は scrollTop で、全体のウェブページの高さは scrollHeight です。これらのことを理解すると、現在のスクロールバーの位置が全体のページの高さを占める割合を計算することができます：scrollTop / (scrollHeight - clientHeight)。この割合は、ユーザーがページの何パーセントを閲覧したかを示します。
プログレスバー
ここでは MDUI のプログレスバーを使用しますが、スタイルに position: fixed を追加して、ページの上部に浮かせる必要があります。
コードを追加する
ページに関連するコードを導入した後、JS を追加し、最初のセクションの方法で読み取り進捗を取得します。
これで、読み取りプログレスバーができます。