沿革セクションに使えるスクロール連動プログレスバーを実装する

1
const updateProgress = () => {
2
  // 現在のスクロール位置（ページの先頭から何pxスクロールしたか）
3
  const scrollTop = window.scrollY;
4
  // ページ全体の高さ（見えていない部分も含む総高さ）
5
  const scrollHeight = root.scrollHeight;
6
  // ビューポートの高さ（現在画面に表示されている領域の高さ）
7
  const viewportHeight = window.innerHeight;
8

9
  // 実際にスクロール可能な最大距離を計算
10
  const maxScroll = scrollHeight - viewportHeight;
11

12
  // スクロールの進捗率を計算（0〜100%にクランプ）
13
  const progress =  maxScroll > 0 ? Math.min(Math.max((scrollTop / maxScroll) * 100, 0), 100) : 0;
14
  // CSS変数へ進捗率を代入
15
  root.style.setProperty("--scroll-progress", progress);
16

17
  ticking = false;
18
};

1
.progress-bar {
2
  /* 他は省略 */
3
  width: calc(var(--scroll-progress) * 1%);
4
}

1
const updateProgress = () => {
2
  // 現在のスクロール位置
3
  const scrollTop = window.scrollY;
4
  // ビューポートの高さ
5
  const viewportHeight = window.innerHeight;
6

7
  // 対象要素ごとに処理
8
  elms.forEach((el) => {
9
    // 要素のビューポート基準の位置・サイズを取得
10
    const rect = el.getBoundingClientRect();
11
    // ドキュメント基準の要素上端位置
12
    const elTop = rect.top + scrollTop;
13

14
    // data属性から開始・終了位置を取得（% → 0〜1へ変換）
15
    const startElement = parseFloat(el.dataset.startElement ?? 0) / 100;
16
    const startViewport = parseFloat(el.dataset.startViewport ?? 100) / 100;
17
    const endElement = parseFloat(el.dataset.endElement ?? 100) / 100;
18
    const endViewport = parseFloat(el.dataset.endViewport ?? 0) / 100;
19

20
    // アニメーション開始スクロール位置
21
    const startScroll =
22
      elTop + rect.height * startElement - viewportHeight * startViewport;
23
    // アニメーション終了スクロール位置
24
    const endScroll =
25
      elTop + rect.height * endElement - viewportHeight * endViewport;
26
    // 開始〜終了までのスクロール距離
27
    const range = endScroll - startScroll;
28

29
    // スクロール進捗率（0〜100%にクランプ）
30
    const progress =
31
      range > 0
32
        ? Math.min(Math.max(((scrollTop - startScroll) / range) * 100, 0), 100)
33
        : 0;
34
    // CSS変数へ進捗率を反映
35
    el.style.setProperty("--scroll-progress", progress);
36
  });
37

38
ticking = false;
39
};

1
<ul class="p-history__list js-scroll-progress" data-start-viewport="80" data-end-viewport="80">