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

1
// ルート要素を取得
2
const root = document.documentElement;
3

4
// フラグを初期化
5
let ticking = false;
6

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

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

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

23
  // フラグをリセット
24
  ticking = false;
25
};

1
// スクロールイベントのコールバック関数
2
const onScroll = () => {
3
  if (!ticking) {
4
    requestAnimationFrame(updateProgress);
5
    ticking = true;
6
  }
7
};

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

1
// 対象要素を取得
2
const elms = document.querySelectorAll(".js-scroll-progress");
3
// フラグを初期化
4
let ticking = false;
5

6
const updateProgress = () => {
7
  // 現在のスクロール位置
8
  const scrollTop = window.scrollY;
9
  // ビューポートの高さ
10
  const viewportHeight = window.innerHeight;
11

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

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

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

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

43
  // フラグをリセット
44
  ticking = false;
45
};

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

1
.p-history__list::before {
2
  content: "";
3
  width: var(--_line-size);
4
  height: calc(var(--scroll-progress) * 1%); /* 進捗率に応じてラインの高さを変化 */
5
  background-color: currentColor;
6
  position: absolute;
7
  top: 5px;
8
  left: calc(calc(var(--_dot-size) / 2) - calc(var(--_line-size) / 2));
9
}