IntersectionObserver | Intersection Observer

In the remove you are spending the content of classList and I think therefore are removing all the classes.

I would suggest filtering the classList for classes that contain -active (The class you add) and then removing those.

made the code for the toggle you probably don't need that. The main part is the fade-out animation:

That's right. This might be a bit confusing but it seems to be the expected behavior according to the specs.

When you set a root for an IntersectionObserver instance, the so-called intersection rectangle — the area that the intersection is checked against — will be the content area of the root element.

The content area refers to the innermost area of an element, which excludes all the paddings:

As for the solution to this problem, you could simply have an extra wrapper element that you set the paddings on, and you remove any paddings from the root element:

I don't know if there is a smartest solution. In this mine, I call observe on each target element that you want observe. The various calls don't override the previous one, but listen to all.

Use querySelectorAll() method.

You are always expecting to have 2 entries intersecting. What happens when top element goes out of viewport area and bottom element just started intersecting? You'd only have one element on screen I guess. So you can't access elements on entries[] which ain't there to be accessed.

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur: A target element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API. The first time the observer is initially asked to watch a target element. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage

But what if you just read what you get? I.e top is intersecting, top is leaving, bottom is intersecting, bottom is leaving. How about an directive to help you out?

First of all, jest use jsdom as its test environment by default. jsdom doesn't support IntersectionObserver, see issue#2032. So we need to mock it and trigger the callback manually.

I will use @testing-library/react-hooks package to test react custom hook.

E.g.

useNearScreen.ts:

You could simplify this code a little by removing the modify function:

It turns out that if you want to observe scrolling on the viewport itself, the root of the IntersectionObserver has to be the document itself, whereas in my question I am trying to set readMarker.value as root, so the observer would only look in it and, of course see it as "visible" right away.