svelte-intersection-observer

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

Try it in the Svelte REPL.

Installation

Yarn

1yarn add -D svelte-intersection-observer

NPM

1npm i -D svelte-intersection-observer

pnpm

1pnpm i -D svelte-intersection-observer

Usage

Basic

Use the bind:this directive to pass an element reference to the IntersectionObserver component.

Then, simply bind to the reactive intersecting prop to determine if the element intersects the viewport.

1<script>
2  import IntersectionObserver from "svelte-intersection-observer";
3
4  let element;
5  let intersecting;
6</script>
7
8<header class:intersecting>
9  {intersecting ? "Element is in view" : "Element is not in view"}
10</header>
11
12<IntersectionObserver {element} bind:intersecting>
13  <div bind:this={element}>Hello world</div>
14</IntersectionObserver>

Once

Set once to true for the intersection event to occur only once. The element will be unobserved after the first intersection event occurs.

1<script>
2  import IntersectionObserver from "svelte-intersection-observer";
3
4  let elementOnce;
5  let intersectOnce;
6</script>
7
8<header class:intersecting={intersectOnce}>
9  {intersectOnce ? "Element is in view" : "Element is not in view"}
10</header>
11
12<IntersectionObserver
13  once
14  element={elementOnce}
15  bind:intersecting={intersectOnce}
16>
17  <div bind:this={elementOnce}>Hello world</div>
18</IntersectionObserver>

let:intersecting

An alternative to binding to the intersecting prop is to use the let: directive.

In the following example, the "Hello world" element will fade in when its containing element intersects the viewport.

1<script>
2  import IntersectionObserver from "svelte-intersection-observer";
3  import { fade } from "svelte/transition";
4
5  let node;
6</script>
7
8<header />
9
10<IntersectionObserver element={node} let:intersecting>
11  <div bind:this={node}>
12    {#if intersecting}
13      <div transition:fade={{ delay: 200 }}>Hello world</div>
14    {/if}
15  </div>
16</IntersectionObserver>

on:observe event

The observe event is dispatched when the element is first observed and also whenever an intersection event occurs.

1<IntersectionObserver
2  {element}
3  on:observe={(e) => {
4    console.log(e.detail); // IntersectionObserverEntry
5    console.log(e.detail.isIntersecting); // true | false
6  }}
7>
8  <div bind:this={element}>Hello world</div>
9</IntersectionObserver>

on:intersect event

As an alternative to binding the intersecting prop, you can listen to the intersect event that is dispatched if the observed element is intersecting the viewport.

Note: Compared to on:observe, on:intersect is dispatched only when the element is intersecting the viewport. In other words, e.detail.isIntersecting will only be true.

1<IntersectionObserver
2  {element}
3  on:intersect={(e) => {
4    console.log(e.detail); // IntersectionObserverEntry
5    console.log(e.detail.isIntersecting); // true
6  }}
7>
8  <div bind:this={element}>Hello world</div>
9</IntersectionObserver>

API

Props

Dispatched events

• on:observe: fired when the element is first observed or whenever an intersection change occurs
• on:intersect: fired when the element is intersecting the viewport

The e.detail dispatched by the observe and intersect events is an IntersectionObserverEntry interface.

Note that all properties in IntersectionObserverEntry are read-only.

1interface IntersectionObserverEntry {
2  target: HTMLElement;
3  time: number;
4  isIntersecting: boolean;
5  isVisible: boolean;
6  intersectionRatio: number;
7  intersectionRect: {
8    bottom: number;
9    height: number;
10    left: number;
11    right: number;
12    top: number;
13    width: number;
14    x: number;
15    y: number;
16  };
17  rootBounds: {
18    bottom: number;
19    height: number;
20    left: number;
21    right: number;
22    top: number;
23    width: number;
24    x: number;
25    y: number;
26  };
27  boundingClientRect: {
28    bottom: number;
29    height: number;
30    left: number;
31    right: number;
32    top: number;
33    width: number;
34    x: number;
35    y: number;
36  };
37}

Changelog

Changelog

License

MIT