intersection observer for svelte

Try it in the Svelte REPL

Svelte REPL.t

Usage

Installation

# npm
npm i -D svelte-intersection-observer-directive

# Yarn
yarn add -D svelte-intersection-observer-directive

in components

<script>
import intersection from 'svelte-intersection-observer-directive';
</script>
<div
  use:intersection={{ threshold: 0.5, once: true }}
  on:enterViewport={handleEnterViewport}
  on:exitViewport={handleExitViewport}>
  Hello world
</div>

API

Props

| Name | Description | Type | Default value | | :--------- | :------------------------------------------------------- | :----------------------------------------------------------------- | :------------ | | once | Unobserve the element after the first intersection event | boolean | false | | root | Containing | | rootMargin | Margin offset of the containing element | string | "0px" | | threshold | Percentage of element visibile to trigger an event | number between 0 and 1, or an array of numbers between 0 and 1 | 0 |

License

MIT