asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport)

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.

executing a callback function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root.

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.

A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.

0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.

Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use Window.requestIdleCallback().

Also, note that if you specified the root option, the target must be a descendant of the root element.