Intersect

stable 0.5 kB
<hkIntersect>

Emits when an element enters or leaves the viewport — the primitive behind lazy loading, infinite scroll and scroll-spy.

#directive#observer

Live demo

Running in this page — interact with it.

Inputs

NameTypeDefaultDescription
intersectThresholdnumber0Visible fraction that counts as intersecting, 0–1.
intersectRootElement | nullnullScroll container. Defaults to the viewport.
intersectOncebooleanfalseDisconnects after the first entry.

Outputs

  • enteredEventEmitter<IntersectionObserverEntry>

    Emits on enter.

  • leftEventEmitter<IntersectionObserverEntry>

    Emits on exit.

Theming

This one adds no tokens of its own — it renders entirely from the global token layer.

Accessibility

  • Purely observational — it adds no roles and changes nothing in the accessibility tree.
  • The observer is disconnected on destroy, so it cannot outlive its element.

More in Utility