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
