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.
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 NERFINISHED ⓘ |
| definedIn | Intersection Observer specification NERFINISHED ⓘ |
| designedFor | Efficient observation of multiple elements ⓘ |
| documentationAvailableAt | MDN Web Docs NERFINISHED ⓘ |
| 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
NERFINISHED
ⓘ
IntersectionObserverEntry NERFINISHED ⓘ |
| exposesMethod |
IntersectionObserver.constructor()
ⓘ
IntersectionObserver.disconnect() NERFINISHED ⓘ IntersectionObserver.observe() NERFINISHED ⓘ IntersectionObserver.takeRecords() NERFINISHED ⓘ IntersectionObserver.unobserve() NERFINISHED ⓘ |
| 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 NERFINISHED ⓘ |
| partOf | Web Platform NERFINISHED ⓘ |
| 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
NERFINISHED
ⓘ
Resize Observer API NERFINISHED ⓘ |
| standardizedBy | W3C NERFINISHED ⓘ |
| supportedIn |
Modern desktop browsers
ⓘ
Modern mobile browsers ⓘ |
| supportsOption |
root
ⓘ
rootMargin ⓘ threshold ⓘ |
| supportsRootType |
Scrollable element as custom root
GENERATED
ⓘ
Viewport as default root GENERATED ⓘ |
| usableWith |
Frameworks like React, Vue, Angular
ⓘ
Single-page applications ⓘ |
| usesCallback | IntersectionObserverCallback ⓘ |
Referenced by (2)
Full triples — surface form annotated when it differs from this entity's canonical label.