💭

IntersectionObserver を使用して要素の背景色を変更する

に公開
JavaScript
tech

目的:IntersectionObserver APIの使用方法を学ぶ

要素がビューポートに入ったときに特定のアクションを実行する。

課題詳細

  • 下記のHTMLで、.target-element クラスを持つ要素がビューポートに入ったときに背景色が緑色に変わるように、IntersectionObserverを使用してJavaScriptコードを記述してください。以下のヒントを参考にしてください。
  1. IntersectionObserverのオプションを設定して、ビューポートに対して相対的に監視する。
  2. 要素がビューポートに入ったときに、entry.isIntersectingプロパティを使用してチェックする。
  3. ビューポートに入った要素のスタイルを変更する。
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IntersectionObserver 課題</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            height: 200vh;
            /* スクロールを有効にするための高さ */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .target-element {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            margin: 50px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .target-margin {
            width: 200px;
            height: 200px;
            background-color: lightgray;
            margin: 50px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="target-margin"></div>
        <div class="target-margin"></div>
        <div class="target-element">ターゲット</div>
        <div class="target-element">ターゲット</div>
        <div class="target-element">ターゲット</div>
    </div>
    <script src="script.js"></script>
</body>

</html>

javascript

document.addEventListener('DOMContentLoaded', function () {
    var options = {
        root: null, // ビューポートに対して相対的
        rootMargin: '0px',
        threshold: 0.5 // 60%がビューポートに入ったときにトリガー
    };
    var observer = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.style.backgroundColor = 'green';
                // 一度だけ変更したい場合は次の行のコメントを外してください
                // observer.unobserve(entry.target);
            }
            else {
                entry.target.style.backgroundColor = 'lightgray';
            }
        });
    }, options);
    // 監視するターゲット要素を選択
    var targets = document.querySelectorAll('.target-element');
    targets.forEach(function (target) {
        observer.observe(target);
    });
});
GitHubで編集を提案

Discussion