IntersectionObserver asynchronously reports how an element intersects a viewport or a specified root. It is useful for lazy loading and requesting another portion of a list, but it does not prove that a person read the content. Interpret a notification through its comparison root, area ratio, and recorded timing.

Conceptual diagram of asynchronous notifications when an intersection ratio crosses a threshold

The root defines the comparison area

MDN describes root as the element used to check intersection; a null root uses the viewport. A page scroll and a scrollable list can have different comparison areas. Before observing the list's end, decide which area entering it is meant to trigger work.

RootMargin grows or shrinks the root bounds used in the calculation. A positive margin can support an early loading trigger, but it does not add CSS spacing to the element. Entering an expanded observation area also does not establish that the target is already on screen. Loading and exposure measurements may therefore need different settings.

For example, a sentinel below a nested list needs a deliberate choice between the list root and the page viewport. A large loading margin may trigger a request before the target reaches the visible screen. That is a consequence of the chosen comparison area. Reusing it for reading counts would mix loading policy with measurement.

A threshold refers to the target's area

For a target with nonzero bounding-box area, W3C defines intersectionRatio as intersection area divided by the target's area. A threshold of 0.5 does not mean occupying half the root. It refers to the target's intersection ratio, which may be low for a very large target even when part of it fills the screen.

Thresholds identify ratio boundaries to cross, rather than requesting a callback for each scroll pixel. MDN also documents notification when observation begins. Counting every initial callback as a fresh entry would change the meaning of a metric. Define behavior from the recorded state and whether the target has already been handled.

Interpret isIntersecting separately from the ratio

W3C's isIntersecting indicates whether the target intersects the root, including distinctions around zero-area edge adjacency. A zero ratio for an ordinary target does not always mean the flag is false. An example where the target touches the boundary helps show the difference between these two fields.

The entry records a calculated state, not a continuous view of the screen. Layout can change before notification delivery or during callback processing. Distinguish the entry's recorded time from the time processing begins. The values should not be assumed to provide precise pixel collisions or continuous animation control.

Expert perspective: keep callback work short

MDN explains that the browser manages intersection monitoring, but callbacks execute on the main thread. The API does not move all application work to another thread. Heavy calculations or many DOM changes inside a callback can still impair responsiveness even after replacing manual monitoring.

For lazy loading, start the needed request and stop observing a target when repeated handling is unnecessary. A growing list also needs request-in-progress state and an end-of-content condition. The notification is a trigger: success handling, duplicate-request prevention, and termination remain application responsibilities.

Verify exposure separately from attention

Check a viewport root, a nested scrolling root, an expanded margin, and a large target with a low ratio. Test initial notification and reentry separately. Confirm behavior in supported browsers and whether a completed target leaves observation as intended. These cases clarify the configuration without relying on callback counts alone.

Basic geometric intersection does not establish freedom from occlusion, human attention, or completed reading. MDN also distinguishes the API from an exact map of overlapping pixels. Decide whether intersection state expresses the intended product condition, and define separate evidence for measurements that extend beyond it.

Sources