{{SeeCompatTable}}{{APIRef("")}}
The IntersectionObserver
interface of the the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.
Constructor
- {{domxref("IntersectionObserver.IntersectionObserver()")}}
- Creates a new
IntersectionObserver
object.
Properties
- {{domxref("IntersectionObserver.root")}} {{readonlyinline}}
- A specific ancestor of the {{domxref("element")}} being observed. If no value was passed to the constructor, the top-level document's viewport is used.
- {{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
- An offset applied to the root's {{Glossary('bounding_box')}} when calculating intersections, effectively shrinking or growing the root for calculation purposes. This is not guaranteed to be identical to the value passed in the constructor. If no value was passed to the constructor, "0px 0px 0px 0px" is used.
- {{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
- A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.
Methods
- {{domxref("IntersectionObserver.disconnect")}}
- TBD
- {{domxref("IntersectionObserver.observe")}}
- TBD
- {{domxref("IntersectionObserver.takeRecords")}}
- TBD
- {{domxref("IntersectionObserver.unobserve")}}
- TBD
-
Examples
// TBD
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('IntersectionObserver','#intersection-observer-private-slots','IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Initial definition. |
Browser Compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
{{CompatChrome(51.0)}} |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(51.0)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(51.0)}} |