JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 216
  • Score
    100M100P100Q83420F
  • License MIT

Action that wraps IntersectionObserver

Package Exports

  • @svelte-put/intersect

Readme

@svelte-put/intersect

npm.badge bundlephobia.badge docs.badge repl.badge

Svelte action use:intersect - wrapper for IntersectionObserver

demo

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

<script lang="ts">
  import { intersect, type IntersectDetail } from '@svelte-put/intersect';

  function onIntersect(e: CustomEvent<IntersectDetail>) {
    const { observer, entries, direction } = e.detail;
    console.log('the observer itself', observer);
    console.log('scrolling direction:', direction);
    console.log('intersecting:', entries[0]?.isIntersecting ? 'entering' : 'leaving');
  }
</script>

<div use:intersect onintersect={onIntersect} onintersectonce></div>

Changelog