svelte-intersect

demo

import {intersect} from 'svelte-intersect';

<li
	use:intersect={{
		onintersect: ({intersecting, intersections, el, obeserver, disconnect}) =>
			el.classList.toggle('intersecting', intersecting),
		ondisconnect: ({intersecting, intersections, el, obeserver}) => { /* */ },
		count,
		options: {threshold},
	}}
>

An options.threshold of 0 triggers the event when the element is inside the viewport at least a pixel, and a value of 1 triggers the event when it is fully inside the viewport. See also options.root and options.rootMargin in the IntersectionObserver docs.

A count of 1 disconnects the observer after the element enters and leaves the viewport one time, like 'once' for events. Similar for any positive integer.

A count that's negative or undefined makes it so it will never automatically disconnect.

A count of 0 disables onintersect and never creates the IntersectionObserver.

See also the API docs and demo source code.