This content originally appeared on DEV Community and was authored by Obada
The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur:
A traget 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.
Typically, you'll want to watch for intersection changes with regard to the target element's closest scrollable ancestor, or, if the target element is not a descendant of a scrollable element, the device's viewport.
The API works the same way, in all cases, whether you're using the viewport or some other element as 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 .
Creating an Intersection Observer
create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other:
`
const options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
`
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.
Intersection Observer options
The option object passed into the IntersectionObserver() constructor let you control the circumstances under which the observer's callback is invoked. it has the following fields:
root
the element that is used as the viewport for checking visibility of the target. MUST be the ancestor of the target. Defaults to the browser viewport if not specified or if null.
rootMargin
Margin around the root. A string of one to four values similar to the CSS margin property, e.g., "5px 10px 15px 25px" (top, right, bottom, left). The values can ONLY be percentages or absolute lengths.
Threshold
Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5 . If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even on pixel is visible, the callbach will be run). A value of 1.0 means that the treshold 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() .
đź”— Related Links
💡 Simple Demo Project – A basic implementation of the Intersection Observer API
Live Demo (https://obada-barakat.github.io/intersection-observer-demos/Simple-demo/)⚙️ Advanced Demo (Coming Soon) – A more interactive use case with lazy loading and multiple observed elements
Stay tuned!
Conclusion
The Intersection Observer API is a powerful tool that can help you build performance-friendly, scroll-based features without constantly polling the DOM. Whether you're implementing lazy loading, triggering animations, or building infinite scroll, this API gives you a clean and efficient way to track element visibility.
I've created a couple of hands-on demos to help you understand how it works in real projects. If you're curious to dive deeper, check out the code linked above — and feel free to leave feedback or ask questions!
This content originally appeared on DEV Community and was authored by Obada
Obada | Sciencx (2025-06-07T12:38:09+00:00) Intersection Observer API. Retrieved from https://www.scien.cx/2025/06/07/intersection-observer-api-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.