IntersectionObserverの使い方

Question

HTMLでtitleというクラスがついた要素が画面内に入ったときに、activeというクラスが付くようにしたいです。
現状だと、エラーは出ていないのですが、画面内に入ってもactiveクラスがつかないという状態です。

どなたか知識のある方教えていただければ幸いです。

class textUp {
    constructor(el) {
        this.el = el;
        this.onIntersect();
    }
    onIntersect() {
        const start = new IntersectionObserver(this._addClass, option);
        start.observe(this.el);
    }
    _addClass(entries) {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.classList.add('active');
                observer.unobserve(entry.target);
            }
        })
    }
}

const option = {
    root: null,
    rootMargin: "0px",
    threshold: 1.0
};


const text = new textUp(document.querySelector('.title'));

Comments

[miyabi_pudding]

まず、各所で、各変数の中に何が入ってるかなどはコンソールで確認はされましたか？
そこをまずご自身で検証されるといいかと思います。

[yamazaki619]

ご回答ありがとうございます。
ご指摘通り、今後意識して確認してみようと思います。

Answer 1

IntersectionObserverの使い方

• Intersection Observer API API概要の説明
• IntersectionObserver オブジェクトの説明

まずは抽象化を考えず、リファレンスの例を参考に関数式 で実装してはいかがでしょう。

ご質問のコードでは IntersectionObserver のインスタンスが start というレキシカルな定数に閉じ込められていますし、宣言されていない observer のメソッド unobserve() を実行しようとしています。

抽象化を急ぎすぎて、リファレンスに示される機能を実装できていません。

Comments

[yamazaki619]

ご回答ありがとうございます。
ご指摘通りだと思います。もう一度リファレンスを読んでから実装しようと思います。

Answer 2

こんにちは、

entry.classList.add('active');
observer.unobserve(entry.target);

を下のようにしたらどうでしょうか？

entry.target.classList.add("active");
this.unobserve(entry.target);

Comments

[yamazaki619]

ご回答ありがとうございます。
実際に教えていただいたとおりにすれば動いたのでベストアンサーにさせていただきます。