svelte-intersection-observer

svelte-intersection-observer

Detect if an element is in the viewport using the Intersection Observer API.

Try it in the Svelte REPL.

Install

yarn add -D svelte-intersection-observer
# OR
npm i -D svelte-intersection-observer

Usage

Basic

<script>
  import IntersectionObserver from "svelte-intersection-observer";

  let element;
  let intersecting;
</script>

<header class:intersecting>
  {intersecting ? "Element is in view" : "Element is not in view"}
</header>

<IntersectionObserver {element} bind:intersecting>
  <div bind:this={element}>Hello world</div>
</IntersectionObserver>

Once

Set once to true for the intersection event to occur only once.

The element will be unobserved after the intersection occurs.

<script>
  let element2;
  let intersectOnce;
</script>

<header class:intersecting={intersectOnce}>
  {intersectOnce ? "Element is in view" : "Element is not in view"}
</header>

<IntersectionObserver once element={element2} bind:intersecting={intersectOnce}>
  <div bind:this={element2}>Hello world</div>
</IntersectionObserver>

on:intersect event

The "intersect" event is dispatched only if the observed element is intersecting the viewport.

<IntersectionObserver
  {element}
  on:intersect="{(e) => {
    console.log(e.detail); // IntersectionObserverEntry
  }}"
>
  <div bind:this="{element}">Hello world</div>
</IntersectionObserver>

API

Props

Prop name	Description	Value
element	Element observed for intersection	HTMLElement
root	Containing element	null or HTMLElement (default: null)
rootMargin	Margin offset of the containing element	string (default: "0px")
threshold	Percentage of element visibility to trigger an event	number between 0 and 1 (default: 0)
entry	Observed element metadata	IntersectionObserverEntry
once	If true, the observed element will be unobserved upon intersect	boolean (default: false)
intersecting	true if the observed element is intersecting the viewport	boolean (default: false)
observer	IntersectionObserver instance	IntersectionObserver

Dispatched events

• on:observe: fired when an intersection change occurs (type IntersectionObserverEntry)
• on:intersect: fired when an intersection change occurs and the element is intersecting (type IntersectionObserverEntry)

TypeScript support

Svelte version 3.31.0 or greater is required to use this module with TypeScript.

Changelog

Changelog

License

MIT

Changelog

0.7.0 - 2021-04-23

Features

• Re-initialize observer if rootMargin changes