S Svelora

Quick Example

useIntersectionObserver Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `use-intersection-observer`

Code

                <script lang="ts">
 import { useIntersectionObserver } from 'svelora';

 let target = $state<Element | null>(null);
 const io = useIntersectionObserver(() => target);
</script>

<div bind:this={target}>
 {io.isIntersecting ? 'Visible' : 'Hidden'}
</div>

useIntersectionObserver

Observe an element's intersection with the viewport (or a root), with automatic cleanup. Ideal for lazy-loading, reveal-on-scroll, and visibility tracking.

Live visibility

This badge tracks the target card far below. Scroll down and watch it flip as the target enters and leaves the viewport.

Out of view Entered: 0×

Lazy target (threshold: 0.25)

Waiting to enter view…