useIntersectionObserver

Demo

Enable

Scroll down 👇

I'm the target! 🎯

Element outside the viewport

Usage

With a reference to an element, you can use the useIntersectionObserver utility to watch for intersection changes of the target element.

	<script lang="ts">
  import { useIntersectionObserver } from "runed";
 
  let target = $state<HTMLElement | null>(null);
  let root = $state<HTMLElement | null>(null);
 
  let isIntersecting = $state(false);
 
  useIntersectionObserver(
    () => target,
    (entries) => {
      const entry = entries[0];
      if (!entry) return;
      isIntersecting = entry.isIntersecting;
    },
    { root: () => root }
  );
</script>
 
<div bind:this={root}>
  <div bind:this={target}>
    {#if isIntersecting}
      <div>Target is intersecting</div>
    {:else}
      <div>Target is not intersecting</div>
    {/if}
  </div>
</div>

Pause

You can pause the intersection observer at any point by calling the pause method.

	const observer = useIntersectionObserver(/* ... */);
 
observer.pause();

Resume

You can resume the intersection observer at any point by calling the resume method.

	const observer = useIntersectionObserver(/* ... */);
 
observer.resume();

Stop

You can stop the intersection observer at any point by calling the stop method.

	const observer = useIntersectionObserver(/* ... */);
 
observer.stop();

isActive

You can check if the intersection observer is active by checking the isActive property.

Warning

This property cannot be destructured as it is a getter. You must access it directly from the observer.

	const observer = useIntersectionObserver(/* ... */);
 
if (observer.isActive) {
  // do something
}