requestAnimationFrameで実現する、スクロール方向に応じたUI切り替え

1
const initScrollDirectionDetection = () => {
2
  let lastScrollY = window.scrollY;
3
  let isScheduled = false;
4

5
  // スクロール方向を更新する関数
6
  const updateScrollDirection = () => {
7
    const currentScrollY = window.scrollY;
8
    const direction = currentScrollY > lastScrollY ? "down" : "up";
9

10
    if (document.body.dataset.scrollDirection !== direction) {
11
      document.body.dataset.scrollDirection = direction;
12
    }
13

14
    lastScrollY = currentScrollY;
15
    isScheduled = false;
16
  };
17

18
  window.addEventListener("scroll", () => {
19
    if (!isScheduled) {
20
      requestAnimationFrame(updateScrollDirection);
21
      isScheduled = true;
22
    }
23
  });
24
};
25

26
initScrollDirectionDetection();

1
/* スクロール時 */
2
body[data-scroll-direction="down"] {
3
  /* ヘッダーの高さ分だけ上に移動（-1pxは余裕を持たせるため） */
4
  --header-translate-y: calc(-100% - 1px);
5
}
6

7
.l-header {
8
  position: sticky;
9
  inset: 0 0 auto 0;
10
  transition: transform 0.3s;
11
  transform: translateY(var(--header-translate-y));
12
}

1
/* フローティングボタンを隠す */
2
body[data-scroll-direction="down"] {
3
  --floating-button-opacity: 0;
4
}
5

6
.floating-button {
7
  position: fixed;
8
  inset: auto 0 0 auto;
9
  transition: opacity 0.3s;
10
  opacity: var(--floating-button-opacity);
11
  pointer-events: none;
12
}
13

14
/* 「トップへ戻る」ボタンを表示 */
15
body {
16
  --back-to-top-opacity: 0;
17
}
18

19
body[data-scroll-direction="up"] {
20
  --back-to-top-opacity: 1;
21
}
22

23
.back-to-top {
24
  position: fixed;
25
  inset: auto 20px 20px auto;
26
  transition: opacity 0.3s;
27
  opacity: var(--back-to-top-opacity);
28
}

1
let isScheduled = false;
2

3
window.addEventListener("scroll", () => {
4
  if (!isScheduled) {
5
    requestAnimationFrame(updateScrollDirection);
6
    isScheduled = true;
7
  }
8
});

1
window.addEventListener("scroll", () => {
2
  if (!isScheduled) {                           // ①
3
    requestAnimationFrame(updateScrollDirection); // ②
4
    isScheduled = true;                         // ③
5
  }
6
});
7

8
const updateScrollDirection = () => {
9
  // ... DOM更新処理 ...
10
  isScheduled = false;  // ④ ここでフラグをリセット！
11
}

1
window.addEventListener("scroll", updateScrollDirection);