This is a work-in-progress svelte action to register an intersection observer.
npm install @shibiii/svelte-iobserve --save
This piece of code registers a div element with an intersection observer action. The action will emit intersection event when intersection condition is met. The optional cooldown parameter can be set to allow the intersection event to retrigger as long as the intersection condition is met.
<script>
import { iobserve } from '@shibiii/svelte-iobserve';
let counter = 0;
const increment = () => {
counter += 1;
};
</script>
<style>
h1 {
position: sticky;
top: 0;
}
div {
background-color: cornflowerblue;
margin-top: 110vh;
}
</style>
<h1>{counter}</h1>
<div on:intersection={increment} use:iobserve={{ cooldown: 1000 }}>
every second this div is in the viewport the counter increases by one
</div>
The iobserve action emits a custom intersection event when intersection triggers. The emitted event passes the IntersectionObserverEntry object in the detail property.
<script>
const printDetails = (event) => {
console.log(event.detail);
};
</script>
<p on:intersection="{printDetails}" use:iobserve>
I print my intersection details
</p>
The iobserve action can be configured by passing the following parameters:
options
delay
cooldown
once
update
fallback
ISC