IntersectionObserver Class
Observes the intersections of elements with an intersection root (https://w3c.github.io/IntersectionObserver/#intersection-observer-interface): an element or a document, or the viewport of the top-level browsing context (the implicit root). The intersections are computed by the rendering steps of the event loop, after the layout ("run the update intersection observations steps", https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering), and the entries are delivered by a task, so only the elements of the documents of a BrowsingContext intersect.
public sealed class IntersectionObserverConstructors
| Name | Description |
|---|---|
| IntersectionObserver(IntersectionObserverCallback, IntersectionObserverInit?) | Creates an observer (https://w3c.github.io/IntersectionObserver/#initialize-a-new-intersectionobserver). The observer belongs to the associated document of the current global object (the time of its entries is relative to its time origin, and its notifications are delivered by a task of its event loop), or, without a current global object, to the document of the root or of the first observed element. |
IntersectionObserver(IntersectionObserverCallback, IntersectionObserverInit?)
IntersectionObserver.csCreates an observer (https://w3c.github.io/IntersectionObserver/#initialize-a-new-intersectionobserver). The observer belongs to the associated document of the current global object (the time of its entries is relative to its time origin, and its notifications are delivered by a task of its event loop), or, without a current global object, to the document of the root or of the first observed element.
public IntersectionObserver(IntersectionObserverCallback callback, IntersectionObserverInit? options = null)Parameters
callbackIntersectionObserverCallback- The callback invoked with the entries.
optionsIntersectionObserverInit?- The options.
Exceptions
DomException- A margin cannot be parsed (
SyntaxError). RangeErrorException- A threshold is not between 0 and 1.
See also
Properties
| Name | Description |
|---|---|
| Delay | Gets the minimum delay in milliseconds between the notifications of a target (at least 100 when the visibility is tracked). |
| Root | Gets the intersection root: an Element or a Document, or null for the implicit root. |
| RootMargin | Gets the root margin, serialized as four space-separated lengths (pixels) or percentages. |
| ScrollMargin | Gets the scroll margin, serialized as four space-separated lengths (pixels) or percentages. |
| Thresholds | Gets the thresholds, in increasing order. |
| TrackVisibility | Gets whether the observer tracks the visibility of the targets. |
Gets the minimum delay in milliseconds between the notifications of a target (at least 100 when the visibility is tracked).
public int Delay { get; }public Node? Root { get; }Property value
See also
RootMargin
IntersectionObserver.csGets the root margin, serialized as four space-separated lengths (pixels) or percentages.
public string RootMargin { get; }Property value
See also
ScrollMargin
IntersectionObserver.csGets the scroll margin, serialized as four space-separated lengths (pixels) or percentages.
public string ScrollMargin { get; }Property value
See also
Thresholds
IntersectionObserver.csGets the thresholds, in increasing order.
public IReadOnlyList<double> Thresholds { get; }TrackVisibility
IntersectionObserver.csGets whether the observer tracks the visibility of the targets.
public bool TrackVisibility { get; }Property value
See also
Methods
| Name | Description |
|---|---|
| Disconnect() | Stops observing all the elements (https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-disconnect). As in the browsers, the entries that are queued are not delivered (WPT intersection-observer/disconnect.html). |
| Observe(Element) | Starts observing an element (https://w3c.github.io/IntersectionObserver/#observe-target-element). |
| TakeRecords() | Returns the queued entries and clears them (https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-takerecords). |
| Unobserve(Element) | Stops observing an element (https://w3c.github.io/IntersectionObserver/#unobserve-target-element). |
Disconnect()
IntersectionObserver.csStops observing all the elements (https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-disconnect). As in the browsers, the entries that are queued are not delivered (WPT intersection-observer/disconnect.html).
public void Disconnect()Observe(Element)
IntersectionObserver.csStarts observing an element (https://w3c.github.io/IntersectionObserver/#observe-target-element).
TakeRecords()
IntersectionObserver.csReturns the queued entries and clears them (https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-takerecords).
public IReadOnlyList<IntersectionObserverEntry> TakeRecords()Unobserve(Element)
IntersectionObserver.csStops observing an element (https://w3c.github.io/IntersectionObserver/#unobserve-target-element).