【コピペ可】スクロールで要素の表示を判定するjavascriptスニペット

交差監視API（IntersectionObserverAPI）によってユーザーのスクロール監視を行う方法を紹介します。特定の要素までスクロールしたら要素をフェードインでふわっとアニメーション表示させたり、フッターまでスクロールした時にトップに戻るボタンを表示したりする際に使うことができます。

スクロール監視用のスニペット

var target = document.querySelector("#target"); //要素を取得
var observer = new IntersectionObserver(function (entry) {
    entry.forEach(function (item) {
        if (item.target === target) {
            if (item.isIntersecting) {
                //表示されたとき
                // console.log('表示領域に入りました。');
            } else {
                //非表示になったとき
                // console.log('表示領域から外れました。');
            }
        }
    });
}, {
    root: null, //ターゲットが見えるかどうかを確認するためのビューポート, nullはブラウザビューポート
    rootMargin: '0px', //rootの周りのマージンの値
    threshold: 0 //どの程度表示されたか
});
observer.observe(target); //交差監視を開始する

IntersectionObserverAPIの覚えておきたいポイント

• observer.observeで監視開始する
• observer.unobserveで監視終了する
• isIntersectiongで表示領域にはいったのか（表示されたのか）、表示領域から外れたのか（非表示になったのか）を判定する

ブラウザの対応状況

古いiOSやIEは対応していないので注意してください。

https://caniuse.com/?search=intersection%20observer