svelte-intersection-observer-directive
v1.0.3
Published
A simple svelte intersection observer lib by svlete use actions.
Readme
intersection observer for svelte
Try it in the Svelte REPL
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 |