a svelte action that registers an intersection observer

Usage no npm install needed!

<script type="module">
  import shibiiiSvelteIobserve from 'https://cdn.skypack.dev/@shibiii/svelte-iobserve';



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.

  import { iobserve } from '@shibiii/svelte-iobserve';

  let counter = 0;
  const increment = () => {
    counter += 1;

  h1 {
    position: sticky;
    top: 0;
  div {
    background-color: cornflowerblue;
    margin-top: 110vh;

<div on:intersection={increment} use:iobserve={{ cooldown: 1000 }}>
  every second this div is in the viewport the counter increases by one

intersection event

The iobserve action emits a custom intersection event when intersection triggers. The emitted event passes the IntersectionObserverEntry object in the detail property.

  const printDetails = (event) => {

<p on:intersection="{printDetails}" use:iobserve>
  I print my intersection details


The iobserve action can be configured by passing the following parameters:

  • options

    • this object passes properties to the underlying IntersectionObserver
  • delay

    • an arming delay in milliseconds before the first intersection can trigger
  • cooldown

    • cooldown in milliseconds before intersection can retrigger
    • unlike the IntersectionObserver api's default behaviour, if this is set, intersection will keep retriggering as long as intersection conditions are met
  • once

    • if non-falsy, observer will unregister after the first time it triggers
  • update

    • a parameter which, if its value changes, the observer will reattach
    • upon reattatching the intersection will trigger if conditions are met
  • fallback

    • a function which will be called if the running platform does not support intersection observers