What’s the difference between using getBoundingClientRect() and Intersection Observer to see if the element is visible on the screen

Question

Normally I use this mode to check if the element is really visible on the screen, because I have a little more flexibility. There is some big difference between this mode and Intersection Observer?

if (ev.getBoundingClientRect().top < window.innerHeight && ev.getBoundingClientRect().bottom > 0) {

}

Answer 1

Although I can use to observe some information about a rectangular area, they are quite different

Following the documentation of getBoundingClientRect() here: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

The Element.getBoundingClientRect() method returns the size of one element and its position on the viewport.
The return value is the Domrect object which is the Uniāo of the rectangles returned by getClientRects() to the element, i.e., the attributes CSS border-boxes associated with the element.

The returned value is a Domrect object, which contains the properties read-only left, top, right and bottom that describe the border-box in pixels. top and left are relative to the top-left properties of the viewport.

That is, returns an element.

Already the documentation of IntersectionObserver() here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an Ancestor element or with a top-level Document’s viewport.

In free translation:

The Intersection Observer API provides a way to observe asynchronous changes at the intersection of a destination element with an ancestor or a document display window upper-level.

Also returns an element but slightly different from the getBoundingClientRect(), as can also be seen in the documentation:

The intersection root and root margin Before we can track the intersection of an element with a container, we need to know what that container is. That container is the intersection root, or root element. This can be either a specific element in the Document which is an Ancestor of the element to be observed, or null to use the Document’s viewport as the container.

The root intersection Rectangle is the Rectangle used to check Against the target or targets. This Rectangle is determined like this:

• If the intersection root is the implicit root (that is, the top-level Document), the root intersection Rectangle is the viewport’s re-click.
• If the intersection root has an overflow clip, the root intersection Rectangle is the root element’s content area.
• Otherwise, the root intersection Rectangle is the intersection root’s bounding client Rectangle (as returned by Calling getBoundingClientRect() on it).

In free translation:

The root of the intersection and the edge of the root Before we track the intersection of an element with a container, we need to know what it is this container. This container is the root of the intersection , or element root . Can be a specific element in the document, which is a ancestor of the element to be observed, or nulluse the document view as container.

The root intersection rectangle is the rectangle used to check the target or targets. This rectangle is determined thus:

• If the intersection root is the implicit root (i.e., the top level Document), the intersection rectangle of the root is the rectangle of the preview window.
• If the intersection root has an overflow clip, the intersection rectangle of the root will be the content area of the root element.
• Otherwise, the intersection rectangle of the root is the client rectangle delimiting the root of the intersection (as returned when calling getBoundingClientRect()).

That is to say:

• IntersectionObserver() can return an element similar to getBoundingClientRect() or not, depending on how the element is "calculated" at the intersection.
• while getBoundingClientRect() returns an element, IntersectionObserver() allows you to use a callback, moving to another function to evaluate changes. That is, the function needs to call the getBoundingClientRect() to obtain the element and evaluate its properties, such as top, already IntersectionObserver() can create a callback, whether it will be "automatically" called when there are changes.