Intersection Observer find out element is shown or hidden

Question

Intersection Observer callback function is invoked whenever observed element is shown or hidden (when threshold point is reached)..

So can I get wether element is about to disappear or it's about to show up?

Answer 1

No need to play with root margins and thresholds:

const callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("entering element");
        } else {
            console.log("leaving element");
        }
    });
};

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Look at the 'root margin' section and play with the options there. Threshold is also an option of interest to you.

Answer 3

If my understanding is correct, you should take a look at the entry.intersectionRect property, at the level of the top and bottomproperties, since it accounts for the intersection rectangle with the viewport.

Indeed, when the top equals 0, it means that the observed entry is appearing from the bottom of the viewport, when bottom is equal to the observed entry height, it means that it is disappearing by the top.