【JavaScript】スクロール検知をする方法まとめ

はじめに

Webサイトやアプリで「スクロールを検知」する場面はよくあります。
例えば…

• ヘッダーを縮小して固定表示する
• アニメーションを発火させる
• 無限スクロールでコンテンツを追加する

本記事では、スクロールイベントの基本的な検知方法から、最近の推奨方法まで紹介します。

スクロール検知で使われるクラス

スクロール検知には大きく分けて2つのアプローチがあります。
おすすめはIntersectionObserverです。

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

   • 古くからある方法
   • ページ全体のスクロール量を監視できる
   • 自分で座標や位置計算を行う必要あり

2. IntersectionObserver API

   • 要素がビューポート内に入った／出たことを検知できる
   • 高パフォーマンス
   • 無限スクロールやアニメーション発火などに最適

使い方

1. scrollイベントを使う方法

main.js

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY; // 現在のスクロール量
  console.log(`スクロール位置: ${scrollY}px`);

  if (scrollY > 200) {
    console.log("200px以上スクロールされました");
  }
});

スクロールが検知されていることが確認できました。

ポイント

• スクロールするたびにイベントが発火する
• 高頻度で呼ばれるため、requestAnimationFrameやthrottleで負荷軽減するのがおすすめ

2. IntersectionObserverを使う方法

main.js

const target = document.querySelector(".observe-target");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("ターゲットが画面に入りました");
    } else {
      console.log("ターゲットが画面外に出ました");
    }
  });
});

observer.observe(target);

ポイント

• 対象要素とビューポートの交差状態を検知できる
• スクロール位置の計算不要
• パフォーマンスに優れる

CSSアニメーションと組み合わせる

main.js

const targets = document.querySelectorAll(".fade-in");

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
});

targets.forEach((target) => observer.observe(target));

style.css

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
}

最後に

スクロール検知は、UIの改善やユーザー体験向上に欠かせない技術です。

• 簡易的な実装 → scrollイベント
• 効率的な実装 → IntersectionObserver

状況に応じて使い分けることで、パフォーマンスと可読性の高いコードが書けます。