svelte-intersection-observer-directive

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