Intersection Observer API 기본 개념

정의

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport  사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. mdn docs 中

대표적 사용 유형

• 스크롤 값에 따른 이미지 지연 로딩

• infinite scroll 을 통한 pagination 처리 (data fetching)

• 스크롤 값에 따른 애니메이션 효과

기본 구조

IntersectionObserver

• callback: 콜백 함수
• entries: 인스턴스 배열
• boundingClientRect: 타겟 요소의 크기, 위치 정보
• intersectionRatio: 타겟 요소가 루트 요소와 교차한 영역 수치 (options - threshold 값과 근접함)
• intersectionRect: 루트 요소에 교차한 영역 정보
• isIntersecting: 타겟 요소가 루트 요소에 관찰되는지 여부
• rootBounds: 루트 요소의 크기, 위치 정보
• target: 타겟 요소
• time: entries 값의 변경이 발생한 시간

• observer: IntersectionObserver 를 통해 생성된 인스턴스

options

• root: 범위의 기준이 되는 요소 (루트 요소)

• rootMargin: 루트 요소에 대한 범위 변경 (양수 → 넓어짐, 음수 → 좁아짐)
• css 의 margin 속성과 유사 (top, right, bottom, left 순)

• threshold: 타켓이 보이는 시점부터 설정한 퍼센트마다 콜백을 실행해준다.
• 0 부터 1 까지 적용 가능 (0.3 → 30%, 1 → 100%)
• 숫자 또는 배열값을 적용할 수 있음 ([0.01, 0.5, 1.0])

instance

• instance.observe(target)
• 타겟 관찰을 시작(재개) 한다.

• instance.unobserve(target)
• 타겟 관찰을 중지한다.

• instance.disconnect()
• 인스턴스가 관찰하는 모든 타겟의 관찰을 중지한다.

간단한 예제

이미지 lazy loading

Infinite Scroll 을 통한 Pagination

Scroll Animation

Intersection Observer API - Web API | MDN

Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen. Setting up First, we need to prepare some variables and install the observer. The constants and variables we set up here are: A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

IntersectionObserverEntry - Web APIs | MDN

Returns the bounds rectangle of the target element as a DOMRectReadOnly . The bounds are computed as described in the documentation for Element.getBoundingClientRect() . Returns the ratio of the intersectionRect to the boundingClientRect. Returns a DOMRectReadOnly representing the target's visible area. A Boolean value which is true if the target element intersects with the intersection observer's root.

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry#instance_properties

Intersection Observer - 요소의 가시성 관찰

Intersection observer 는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능 이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있습니다.

https://heropy.blog/2019/10/27/intersection-observer/