Intersection Observer API

김윤진·2022년 4월 21일

JavaScript

목록 보기

8/10

Intersection Observer API

Intersection Observer API는 타켓 요소와 상위 요소 또는 최상위 document의 viewport(현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역) 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다

Intersection Observer API 는 요소가 다른 요소(viewport)에 들어가거나 나갈 때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때마다 실행될 콜백 함수를 등록할 수 있게 한다

즉 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사영할 필요가 없어지고 브라우저는 원하는 대로 교차 영역 관리를 최적화 할 수 있다

정확히 몇 픽셀 겹쳐졌고 어떠한 픽셀이 겹쳐졌는지 Intersection Observer API가 알려줄 수 없다
그러나 "N%" 정도 교차한 경우 상호작용이 이루어져야 한다와 같은 더 일반적인 사용 사례를 다룰 수 있다

Intersection Observer 의 컨셉과 사용

Intersection Observer API는 다음과 같은 상황에 호출되는 콜백을 생서앟는 기능을 제공한다

대상(target)으로 칭하는 요소가 뷰포트나 특정요소(이 API에서 이를 root요소 혹은 root로 칭함)와 교차함
observer가 최초로 타켓을 관측하도록 요청받을 때마다

일반적으로 요소의 교차성이 가장 가까운 스크롤 가능한 조상에 의해 변경되길 원할 것이다 (혹은 대상 요소가 다른 요소의 자손이 아니라면 뷰포트에 의해 변경될 수 있다) document의 루트 요소를 기준으로 해당 요소를 관칙하기 위해서는 null을 설정해야 한다

뷰포트 혹은 다른 요소를 root로 사용하건 간에 이 API는 같은 방식으로 동작한다
대상 요소의 가시성이 변경될 때마다 당신이 등록한 콜백 함수를 실행되며 그것은 당신이 원하는 만큼 root요소와 교차한다

root 와 대상 요소가 교차하는 정도를 intersection ratio라고 한다
이것은 대상 요소의 가시성 퍼센티지를 0.0 ~ 1.0의 숫자로 표현한다

Intersection Observer 생성하기

intersection observer를 생성하기 위해서는 생성자 호출 시 콜백 함수를 제공해야 한다
이 콜백 함수는 threshold가 한 방향 혹은 다른 방향으로 교차할 때 실행된다

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new intersectionObserver(callback, options);

threshold: 1.0은 대상 요소가 root에 지정된 요소 내에서 100% 보여질 때 콜백이 호출된 것을 의미한다

Intersection Observer 설정

IntersectionObserver() 생성자에 전달되는 options 객체는 observer 콜백이 호출되는 상황을 조작할 수 있다. 이는 아래와 같은 필드를 가진다

root
- 대상 객체의 가시성을 확일할 때 사용되는 뷰포트 요소이다
- 이는 대상 객체의 조상 요소여야 한다
- 기본값은 브라우저 뷰포트이며 root값이 null이거나 지정되지 않을 때 기본값으로 설정된다
rootMargin
- root가 가진 여백이다
- 이 속성은 CSS의 margin속성과 유사하다
- 이 값은 퍼센티지가 될 수 있다
- 이것은 root요소의 각 측면의 bounding box를 수축하거나 증가시키며 교차성을 개선하기 전에 적용된다
- 기본값은 0이다
threshold
- observer의 콜백이 실행될 대상 요소의 가시성 퍼센티지를 나타내는 단일 숫자 혹은 숫자 배열이다
- 만일 50%만큼 요소를 보여졌을 때 탐지하고 싶다면 값을 0.5로 설정하면 된다
- 혹은 25% 단위로 요소의 가시성이 변경될 때마다 콜백이 실행되게 하고 싶다면 [0, 0.25, 0.5, 0.75, 1]과 같은 배열을 설정하면 된다
- 기본값은 0이며 (이는 요소가 1픽셀이라도 보이자 마자 콜백이 실애호딤을 의미한다)
- 1.0은 요소의 모든 픽셀이 화면에 노출되기전에는 콜백을 실행시키지 않음을 의마한다

관찰자를 생성한 후에는 관찰할 대상 요소를 지정해야 한다

let target = document.querySelector('#listItem');
observer.observe(target);

대상이 지저오딘 임계값을 충족할 때마다 IntersectionObserver 콜백이 호출된다
콜백은 IntersectionObserverEntry 개체 목록과 관찰자를 수신한다

useEffect(() => {
	const options = {};
	const callback = (entries, observer) => {
		entries.forEach(entry => {
			if(entry.isIntersecting) {
            // 스크롤이 이미지 최상단 도착시
            // target element:
            //   entry.boundingClientRect => DOMRectReadOnly {x: 16, y: 763, width: 330, height: 24, top: 763, …}
            //   entry.intersectionRatio => 0.0416666679084301
            //   entry.intersectionRect => DOMRectReadOnly {x: 16, y: 763, width: 330, height: 1, top: 763, …}
            //   entry.isIntersecting => true
            //   entry.rootBounds => DOMRectReadOnly {x: 0, y: 0, width: 362, height: 764, top: 0, …}
            //   entry.target => <img src="...." src="...." />
            //   entry.time => 2752.600000023842
			}
		});
	};

	const observer = new IntersectionObserver(callback, options);
	observer.observe(imgRef.current);
	}, [])