IntersectionObserverについて

覚えたこと

この辺は定型分

const io = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
    })
})


document.querySelectorAll('.item').forEach(item => {
    io.observe(item);
})

オプションつけたり、画面に入ったらクラスつけたりするならこんな感じで

const options = {
        root: null,
        rootMargin: "-100px 0px 0px 0px",
        threshold:0
}
const io = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if(entry.isIntersecting){
                entry.target.classList.add('inview');
            }else {
                entry.target.classListremove('inview')
            }
        })
}, options);

ちょっと関係ないけど
スクロールに合わせてナビにクラス付けるならこんな感じ

entries.forEach(entry => {
       if(entry.isIntersecting){
           const id = entry.target.getAttribute('id')
           document.querySelector(`nav li a[href="#${id}"]`).parentElemnt.classList.add('act');
       }
})

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
参考