Web APIのIntersectionObserverを利用して画面内に入ったら処理を実行する方法

window.addEventListener('load', () => {
    ViewInEvent();
});

const ViewInEvent = () => {
    const ObserveElements = document.querySelectorAll('#ViewIn');
    if() { return false; }

    const options = {
        root: null, // ルート要素 (nullはviewport)
        rootMargin: '0px', // ルートの境界ボックスを拡大または縮小するためのマージン
        threshold: 0 // 交差を検出するために要素がどのくらい画面内に入る必要があるかを示す閾値
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 画面内に入った場合、指定のクラスを付与
                entry.target.classList.add('show');
                // オブザーバーからターゲットを削除する (一度だけ実行する場合)
                observer.unobserve(entry.target);
            }
        });
    }, options);

    ObserveElements.forEach(element => {
        observer.observe(element);
    });
};

if (entry.isIntersecting) {
    entry.target.classList.add('show');
    observer.unobserve(entry.target);
}

// ↓↓↓↓

if (entry.isIntersecting) {
    entry.target.classList.add('show');
} else {
    entry.target.classList.remove('show');
}