useEffect 中的 intersectionobserver 只触发一次

Question

I am attempting to make style class on and off when it is observed, but it works only once. i guess it may be solved with obs.unobserve or obs.disconnect, but i failed to write a code in right way. Here is the code. (simplified)

    useEffect(() => {
        const obs = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.intersectionRatio > 0) {

                    $('.class-a').addClass('white');
                }
                else {
                   
                    $('.class-a').addClass('black');
                }

            })
        }, { threshold: [0.5] });
        obs.observe(document.querySelector('.sub'));

    }, [])

Answer 1

You are only querying a single selector. If you want to query more than one, you would have to use document.querySelectorAll() .

Edit try this (querying them on their own won't work, have to actually loop through them as well):

const list = document.querySelectorAll('.sub');
list.forEach((el) => {
  obs.observe(el);
})

Referring to these mdn docs

Working non-react test: https://codepen.io/shikkaba/pen/eYMVXXX