Skip to main content

IsInViewport

현재 뷰포트 내에서 요소가 보이는지 추적합니다.

IsInViewport은 useIntersectionObserver 유틸리티를 사용하여 현재 뷰포트 내에서 요소가 보이는지 추적합니다.

요소 또는 요소를 반환하는 getter와 useIntersectionObserver 유틸리티 옵션과 일치하는 선택적 options 객체를 받습니다.

데모

Target node

Scroll down to observe the behavior

Target node is out of viewport

사용법

		<script lang="ts">
	import { IsInViewport } from "runed";
 
	let targetNode = $state<HTMLElement>()!;
	const inViewport = new IsInViewport(() => targetNode);
</script>
 
<p bind:this={targetNode}>대상 노드</p>
 
<p>뷰포트 내 대상 노드: {inViewport.current}</p>

타입 정의

		import { type UseIntersectionObserverOptions } from "runed";
export type IsInViewportOptions = UseIntersectionObserverOptions;
 
export declare class IsInViewport {
	constructor(node: MaybeGetter<HTMLElement | null | undefined>, options?: IsInViewportOptions);
	get current(): boolean;
}

Contributors

Hunter Johnston
Hunter Johnston