IntersectionObserver's callback function was not called

Question

I have a cross viewer. Everything works fine. I have a top section. But when I scroll down and then refresh (it refreshes to the previously visible section), the cross-viewer callback is called to the top section instead of the visible section.

const observerCallBack = (entries, observer) => {
    const [entry] = entries

    console.log("Callback:",entry.target)
    if(!entry.isIntersecting) return;
    if(entry.target.children.length > 1){
        entry.target.children[1].classList.remove('slide-from-right')
        entry.target.children[0].classList.remove('slide-from-left')
    }else{
        entry.target.classList.remove('slide-from-left')
    }
    observer.unobserve(entry.target)
}

const observeOptions = {
    root:null,
    threshold:[0.5, 0.9],
}

const observer = new IntersectionObserver(observerCallBack,observeOptions)

I've tried using console.log but didn't find any solution.

Answer 1

You need to subscribe to the observer you are creating by providing it with the element you want to observe.

observer.observe(this.elementRef.nativeElement);