useIntersectionObserver · @codigosinsiesta/theme

Demo · triggerOnce: false

Haz scroll en la caja: el estado vuelve a false al salir del viewport.

fuera de viewport

Haz scroll dentro de esta caja ↓

. . .

target · oculto

. . .

Demo · triggerOnce: true

Una vez que el target entra, el observer se desconecta y el estado se queda en true.

fuera de viewport

Haz scroll dentro de esta caja ↓

. . .

target · oculto

. . .

Uso

my-component.svelte

<script>
  import { useIntersectionObserver } from '@codigosinsiesta/theme';
  const observer = useIntersectionObserver({ threshold: 0.3, triggerOnce: true });
</script>

<div use:observer.target class:visible={observer.isVisible}>
  ...
</div>

El mismo observer puede aplicarse a N nodos. isVisible será true mientras cualquiera de ellos esté intersectando.

API

Option	Tipo	Default	Descripción
`threshold`	`number \| number[]`	`0`	Igual que `IntersectionObserverInit.threshold`.
`rootMargin`	`string`	`'0px'`	Margen alrededor del root.
`root`	`Element \| null`	`null`	Viewport ancestral.
`triggerOnce`	`boolean`	`false`	Si `true`, desconecta tras la primera intersección.

Devuelve:

Field	Tipo	Descripción
`target`	Svelte action	Aplícalo con `use:observer.target`.
`isVisible`	`boolean` (reactivo)	`true` si algún nodo observado está intersectando.
`entry`	`IntersectionObserverEntry \| null`	Última entry registrada — útil para leer `intersectionRatio`.

Casos de uso

Decks: disparar animaciones cuando un slide se activa.
Sitios CsS (portfolio, landings): animar barras de skills, items de timeline, contadores de stats al hacer scroll.
Lazy-load: combinar con triggerOnce para cargar contenido pesado solo cuando aparece.