Intersect

Uses IntersectionObserveropen in new window to fire events when content enters or exits the screen.

The components accepts four props: root, rootMargin, threshold, and options. The first three correspond to the IntersectionObserveropen in new window options properties, or you can pass them all together to the options prop.

Examples

Open your console and scroll around to watch events get fired.

.intersection-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  border: 1px solid;
}

Using a scoped slot

By using scoped slots, you can access the current IntersectionObserverEntryopen in new window

(Setting the threshold to 1 means the entire element must be visible before isIntersecting changes)