svelte-intersection-observer

svelte-intersection-observer

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

Install

yarn add -D svelte-intersection-observer

Usage

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

  let element;
</script>

<IntersectionObserver {element} let:intersecting>
  <div bind:this="{element}">
    {#if intersecting}
      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	null or IntersectionObserverEntry

Dispatched Events

The observe event is dispatched when an intersection change occurs.

<IntersectionObserver
  {element}
  on:observe={({ detail: entry }) => {
    console.log(entry);
    // entry.boundingClientRect
    // entry.intersectionRatio
    // entry.intersectionRect
    // entry.isIntersecting
    // entry.rootBounds
    // entry.target
    // entry.time
  }} />

Changelog

License

MIT

Changelog

0.2.0 - 2020-11-18

• Add TypeScript definitions