IntersectionObserver入門：初心者向けガイド｜DAD UNION

Contents

IntersectionObserverとは？
IntersectionObserverを使う場面
メリットとデメリット
- メリット
- デメリット
実装デモ：スクロールに応じてヘッダーメニューの色が変わる
JavaScriptのscrollイベントとの比較
まとめ

IntersectionObserverとは？

IntersectionObserverは、ウェブページの特定の要素がビューポート（ユーザーの画面）に入るかどうかを非同期で監視するJavaScript APIです。
これにより、スクロール位置に基づいて動的なビジュアルエフェクトを実装できます。

IntersectionObserverを使う場面

遅延読み込み（Lazy Loading）：画像や動画などのコンテンツを、ユーザーがそれらを必要とする時まで読み込まないようにします。
スクロールアニメーション：ユーザーがページをスクロールするときに要素をアニメーションさせる。
インフィニットスクロール：ユーザーがページの最下部に達したときに追加コンテンツを読み込む。

メリットとデメリット

メリット

パフォーマンスの向上：不要なJavaScriptの実行を減らすことができます。
ユーザーエクスペリエンスの向上：コンテンツの遅延読み込みにより、ページの初期読み込み時間を短縮できます。

デメリット

ブラウザの互換性：一部の古いブラウザではサポートされていない可能性があります。
複雑さ：初心者には理解や実装が少し難しいかもしれません。

実装デモ：スクロールに応じてヘッダーメニューの色が変わる

以下のコードは、IntersectionObserverを使って、ページ内のスクロールに応じて各セクションエリアがビューポート内に入ると、固定ヘッダーメニューのテキストリンクの色が変わるデモページを実装してみます。

HTMLコード

このHTMLコードには、セクション1からセクション4までの4つのセクションが含まれており、各セクションには独自のIDが割り当てられています。これにより、IntersectionObserverを使用して各セクションのビューポート内への入出を監視し、対応するナビゲーションリンクのスタイルを変更することが可能になります。

<header>
    <nav>
        <ul>
            <li><a href="#section1">セクション1</a></li>
            <li><a href="#section2">セクション2</a></li>
            <li><a href="#section3">セクション3</a></li>
            <li><a href="#section4">セクション4</a></li>
        </ul>
    </nav>
</header>
<!-- セクション1 -->
<section id="section1">
    <h1>IntersectionObserverを使って、<br>スクロールに応じて各セクションエリアがビューポート内に入ると、<br>ヘッダーテキストリンクの色が変わります。</h1>
    <h2>セクション1</h2>
    <p>ここはセクション1の内容です。</p>
</section>

<!-- セクション2 -->
<section id="section2">
    <h2>セクション2</h2>
    <p>ここはセクション2の内容です。</p>
</section>

<!-- セクション3 -->
<section id="section3">
    <h2>セクション3</h2>
    <p>ここはセクション3の内容です。</p>
</section>

<!-- セクション4 -->
<section id="section4">
    <h2>セクション4</h2>
    <p>ここはセクション4の内容です。スクロールすると、ヘッダーメニューのリンク色が変わります。</p>
</section>

CSS

このCSSは、ヘッダー、ナビゲーションメニュー、およびセクションエリアのスタイルを定義します。各セクションには異なる背景色を設定し、視覚的な区別をつけています。これにより、ユーザーがスクロールして各セクションを確認するときに、視覚的なフィードバックが得られ、IntersectionObserverが機能していることが明確になります。

<style>
body {
  font-size: 16px;
  text-align: left;
  margin: 0;
  padding-top: 60px;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 10px 0 20px 0;
  line-height: 1.8em;
}
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}
nav ul {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: black;
}
section {
    padding: 20px;
    margin: 200px 0;
    border: 1px solid #ddd;
    text-align: center;
}
/* セクション固有のスタイル */
#section1 { background-color: #f9f9f9; }
#section2 { background-color: #e9e9e9; }
#section3 { background-color: #d9d9d9; }
#section4 { background-color: #c9c9c9; }
</style>

JavaScriptコード (IntersectionObserver)

このJavaScriptコードでは、各セクション要素をIntersectionObserverで監視し、そのセクションがビューポート内に入るかどうかに基づいて、関連するナビゲーションリンクのスタイルを変更します。ビューポート内に入ったセクションのリンクは青色かつ太字になり、ビューポート外に出たセクションのリンクは黒色かつ通常のフォントウェイトに戻ります。

<script>
document.addEventListener('DOMContentLoaded', () => {
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 1.0
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            const menuLink = document.querySelector(`nav ul li a[href="#${id}"]`);

            if (entry.isIntersecting) {
                menuLink.style.color = 'blue';
                menuLink.style.fontWeight = 'bold';
            } else {
                menuLink.style.color = 'black';
                menuLink.style.fontWeight = 'normal';
            }
        });
    }, options);

    // セクションごとにObserverを設定
    document.querySelectorAll('section').forEach((section) => {
        observer.observe(section);
    });
});
</script>