Reactで、記事をどこまで読んだかを示すバーを出す方法

import { useEffect, useState, type RefObject } from 'react';

// 記事の要素をどこまで読んだかを 0〜1 で返す。
// 記事の先頭が画面の上端に来たら 0、記事の末尾が画面の下端に来たら 1
export function useReadingProgress(ref: RefObject<HTMLElement | null>) {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const article = ref.current;
    if (!article) return;

    const update = () => {
      const rect = article.getBoundingClientRect();
      // 記事のうち、画面に収まりきらない分の高さ
      const scrollable = rect.height - window.innerHeight;
      // 記事が画面に収まるときは、読み終えた扱いにする
      const value = scrollable <= 0 ? 1 : -rect.top / scrollable;
      setProgress(Math.min(1, Math.max(0, value)));
    };

    update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    // 画像の読み込みなどで記事の高さが変わったときも計算し直す
    const observer = new ResizeObserver(update);
    observer.observe(article);

    return () => {
      window.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
      observer.disconnect();
    };
  }, [ref]);

  return progress;
}

export function ReadingProgressBar({ value }: { value: number }) {
  return (
    <div
      className="progress"
      role="progressbar"
      aria-label="記事を読んだ割合"
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={Math.round(value * 100)}
    >
      <div className="progress-fill" style={{ transform: `scaleX(${value})` }} />
    </div>
  );
}

.progress { position: fixed; top: 0; left: 0; right: 0; height: 6px; background: #eefafd; z-index: 10; }
.progress-fill { height: 100%; background: #00c8e8; transform-origin: 0 50%; }

const articleRef = useRef<HTMLElement>(null);
const progress = useReadingProgress(articleRef);

return (
  <>
    <ReadingProgressBar value={progress} />
    <header className="site-header">サイトのヘッダー</header>
    <article ref={articleRef} className="article">
      {/* 本文 */}
    </article>
    <section className="comments">コメント欄</section>
  </>
);

いちばん上: scrollY=0 記事の高さ=2700 バー=0.000 aria-valuenow=0 ページ全体の割合=0.000
記事の先頭が画面の上端: scrollY=60 記事の高さ=2700 バー=0.000 aria-valuenow=0 ページ全体の割合=0.023
記事の真ん中: scrollY=1010 記事の高さ=2700 バー=0.500 aria-valuenow=50 ページ全体の割合=0.380
記事の末尾が画面の下端: scrollY=1960 記事の高さ=2700 バー=1.000 aria-valuenow=100 ページ全体の割合=0.737
ページのいちばん下: scrollY=2660 記事の高さ=2700 バー=1.000 aria-valuenow=100 ページ全体の割合=1.000

画像が届く前: scrollY=690 記事の高さ=2060 バー=0.500 aria-valuenow=50 ページ全体の割合=0.342
画像が届いたあと（スクロールしていない）: scrollY=690 記事の高さ=2700 バー=0.500 aria-valuenow=50 ページ全体の割合=0.259
ホイールで 1px スクロールしたあと: scrollY=691 記事の高さ=2700 バー=0.332 aria-valuenow=33 ページ全体の割合=0.260

画像が届く前: scrollY=690 記事の高さ=2060 バー=0.500 aria-valuenow=50 ページ全体の割合=0.342
画像が届いたあと（スクロールしていない）: scrollY=690 記事の高さ=2700 バー=0.332 aria-valuenow=33 ページ全体の割合=0.259
ホイールで 1px スクロールしたあと: scrollY=691 記事の高さ=2700 バー=0.332 aria-valuenow=33 ページ全体の割合=0.260

role=progressbar name=記事を読んだ割合 value=50 valuemin=0 valuemax=100

<article className="article article-timeline">
  <div className="progress" aria-hidden="true">
    <div className="progress-fill progress-fill-css" />
  </div>
  {/* 本文 */}
</article>

.article-timeline { view-timeline-name: --article; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress-fill-css {
  animation: grow linear both;
  animation-timeline: --article;
  animation-range: contain;
}

いちばん上: scrollY=0 記事の高さ=2700 バー=0.000 ページ全体の割合=0.000
記事の先頭が画面の上端: scrollY=60 記事の高さ=2700 バー=0.000 ページ全体の割合=0.023
記事の真ん中: scrollY=1010 記事の高さ=2700 バー=0.500 ページ全体の割合=0.380
記事の末尾が画面の下端: scrollY=1960 記事の高さ=2700 バー=1.000 ページ全体の割合=0.737
ページのいちばん下: scrollY=2660 記事の高さ=2700 バー=1.000 ページ全体の割合=1.000

画像が届く前: scrollY=690 記事の高さ=2060 バー=0.500 ページ全体の割合=0.342
画像が届いたあと（スクロールしていない）: scrollY=690 記事の高さ=2700 バー=0.332 ページ全体の割合=0.259