Intersection Observer 는 브라우저 뷰포트(Viewport) 와 설정한 엘리먼트 (Element) 의 교차 영역을 관찰하며, 요소가 뷰포트와의 겹치는 영역이 있는지를 구별하는 기능을 제공합니다.
new IntersectionObserver 생성자 함수로 생성한 인스턴스로 관찰자 (Observer) 를 초기화하고 인수로 콜백(Callback) 과 옵션을 가집니다.
const observer = new IntersectionObserver(callback, options); observer.observe(targetElement);
콜백 (Callback)
interface IntersectionObserverCallback {
(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
}
관찰 대상이 등록되거나 가시성의 변화가 생기면 관찰자는 콜백을 실행합니다.
즉, 관찰대상 엘리먼트가 root엘리먼트와 겹치는 영역이 생기면 콜백 함수를 실행한다.
콜백 함수는 entries, observer 를 인수로 받습니다.
entries
: IntersectionObserver 인스턴스의 배열입니다.
IntersectionObserverEntry 의 속성들은 아래와 같습니다.
interface IntersectionObserverEntry { readonly boundingClientRect: DOMRectReadOnly; readonly intersectionRatio: number; readonly intersectionRect: DOMRectReadOnly; readonly isIntersecting: boolean; readonly rootBounds: DOMRectReadOnly | null; readonly target: Element; readonly time: number; }