Intersection Observer API

E856227

The Intersection Observer API is a web browser interface that lets developers efficiently detect and respond to visibility changes of elements within a webpage’s viewport or a scrollable container.

All labels observed (6)

How this entity was disambiguated

Statements (50)

Predicate Object
instanceOf Browser API
JavaScript API
Web API
accessibleFrom Window context in web pages
callbackInvokedWhen Intersection of target and root crosses a threshold
callbackReceives Array of IntersectionObserverEntry objects
Observer instance
category DOM and layout APIs
linked to: CSSOM View Module
definedIn Intersection Observer specification
designedFor Efficient observation of multiple elements
documentationAvailableAt MDN Web Docs
enables Efficient scroll-based effects without scroll event listeners
Infinite scrolling implementations
Lazy loading of images and other content
Reporting ad viewability
Triggering animations when elements enter the viewport
executionEnvironment Web browser
exposesInterface IntersectionObserver
IntersectionObserverEntry
exposesMethod IntersectionObserver.constructor()
IntersectionObserver.disconnect()
IntersectionObserver.observe()
IntersectionObserver.takeRecords()
IntersectionObserver.unobserve()
hasPolyfills Yes
improves Performance compared to scroll and resize event polling
introducedTo Provide declarative visibility observation
Reduce need for manual scroll event handling
keyConcept Bounding client rectangle
Intersection ratio
Root intersection rectangle
Target element visibility
languageBinding JavaScript
partOf Web Platform
linked to: Web platform
primaryPurpose Detect visibility changes of target elements
Observe intersections between elements and a root viewport or container
reduces Main thread overhead for visibility detection
relatedTo Mutation Observer API
linked to: Resize Observer API

Resize Observer API
standardizedBy W3C
supportedIn Modern desktop browsers
Modern mobile browsers
supportsOption root
rootMargin
threshold
supportsRootType Scrollable element as custom root
Viewport as default root
usableWith Frameworks like React, Vue, Angular
Single-page applications
usesCallback IntersectionObserverCallback

How these facts were elicited

Referenced by (8)

Full triples — surface form annotated when it differs from this entity's canonical label.

Open Web Platform hasComponent Intersection Observer API
Chrome Web Platform features includesAPI Intersection Observer API
Intersection Observer API definedIn Intersection Observer specification
linked to: Intersection Observer API
Intersection Observer API exposesInterface IntersectionObserver
linked to: Intersection Observer API
Intersection Observer API exposesMethod IntersectionObserver.observe()
linked to: Intersection Observer API
Intersection Observer API exposesMethod IntersectionObserver.unobserve()
linked to: Intersection Observer API
Intersection Observer API exposesMethod IntersectionObserver.disconnect()
linked to: Intersection Observer API
Resize Observer API relatedTo Intersection Observer API