svelte-intersection-observer

svelte-intersection-observer

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

This module ships with TypeScript definitions.

Try it in the Svelte REPL.

Demo

Install

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

Usage

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

  let entry = {};
  let element;

  $: inView = entry.isIntersecting;
</script>

<header>
  <strong>Scroll down.</strong>
  <div>
    Element in view?
    <strong class="answer" class:inView>{inView ? 'Yes' : 'No'}</strong>
  </div>
</header>

<IntersectionObserver {element} bind:entry>
  <div class="element" bind:this="{element}">
    {#if inView}
      Element is in view
    {/if}
  </div>
</IntersectionObserver>

API

Props

Property name	Description	Value
element	Element observed for intersection	HTMLElement
root	Containing element	null or HTMLElement (default: null)
rootMargin	Offset of the containing element	string (default: "0px")
threshold	Percentage of element to trigger an event	number between 0 and 1 (default: 0)
intersecting	If the element is intersecting	boolean
entry	Observed element metadata	IntersectionObserverEntry

Dispatched Events

• on:observe: fired when an intersection change occurs (type IntersectionObserverEntry)

Changelog

License

MIT

Changelog

0.3.0 - 2020-11-23

• Export entry as a reactive prop