Skip to main content

useIntersectionObserver

대상 요소의 교차 변경 사항을 감시합니다.

데모

Scroll down 👇

I'm the target! 🎯

Element outside the viewport

사용법

요소에 대한 참조가 있으면 useIntersectionObserver 유틸리티를 사용하여 대상 요소의 교차 변경 사항을 감시할 수 있습니다.

		<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 메서드를 호출하여 언제든지 intersection observer를 일시정지할 수 있습니다.

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

재개

resume 메서드를 호출하여 언제든지 intersection observer를 재개할 수 있습니다.

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

중지

stop 메서드를 호출하여 언제든지 intersection observer를 중지할 수 있습니다.

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

isActive

isActive 속성을 확인하여 intersection observer가 활성 상태인지 확인할 수 있습니다.

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

Contributors

Hunter Johnston
Hunter Johnston