IntersectionObserver
Creates a new IntersectionObserver that asynchronously observes changes in the intersection of a target element with an ancestor element or the viewport
Syntax
new IntersectionObserver(callback, options?)Parameters
| Parameter | Type | Description |
|---|---|---|
| callback | (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void | Function called when intersection changes |
| options | IntersectionObserverInit | Options: root, rootMargin, threshold |
Return Value
A new IntersectionObserver instance
Examples
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Visible:', entry.target.id)
}
})
})
document.querySelectorAll('.section').forEach(el => observer.observe(el))function lazyLoad(images: NodeListOf<HTMLImageElement>) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target as HTMLImageElement
img.src = img.dataset.src!
observer.unobserve(img)
}
})
})
images.forEach(img => observer.observe(img))
}const observer = new IntersectionObserver(
(entries) => {
entries.forEach(e => e.target.classList.toggle('visible', e.isIntersecting))
},
{ threshold: 0.5, rootMargin: '0px 0px -100px 0px' }
)
document.querySelectorAll('.animate-in').forEach(el => observer.observe(el))Understanding IntersectionObserver
The IntersectionObserver method in JavaScript creates a new IntersectionObserver that asynchronously observes changes in the intersection of a target element with an ancestor element or the viewport. It belongs to the IntersectionObserver object and is one of the most widely used methods for working with intersectionobserver values in modern JavaScript and TypeScript applications.
The method signature is new IntersectionObserver(callback, options?). It accepts 2 parameters: callback, options. When called, it returns a new intersectionobserver instance. Understanding when and how to use IntersectionObserver() helps you write more expressive, readable code.
Common use cases for IntersectionObserver include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-mutationobserver, event-resizeobserver, dom-getboundingclientrect, enabling you to chain operations together for complex data manipulation pipelines.
Browser support for IntersectionObserver is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.
Browser Compatibility
Supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Node.js. Part of the ECMAScript standard.
Related Methods
MutationObserverCreates a new MutationObserver that watches for changes being made to the DOM tree
ResizeObserverCreates a new ResizeObserver that reports changes to the dimensions of an Element's content or border box
Element.prototype.getBoundingClientRectReturns a DOMRect object providing information about the size of an element and its position relative to the viewport
Related Tools
Explore JavaScript Methods
Browse our complete reference of 410 JavaScript methods with syntax, examples, and explanations.