InterSection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공한다. Intersection Observer API는 특정 요소가 다른 요소(또는 viewport)와의 교차점에 들어가거나 나갈 때 또는 두 요소 간의 교차점이 지정된 양만큼 변화될 때 실행되는 콜백 함수를 코드에 등록할 수 있다.
Intersection Observer API는 겹치는 픽셀의 정확한 수나 구체적으로 어떤 픽셀인지 못알려준다. 하지만 "약 N% 정도 겹친다면 어떤 작업을 수행해야 한다" 정도는 가능하다.
교차 관찰자
Intersection Observer API는 두 상황이 발생했을 때 콜백함수를 실행한다.
- 대상 요소는 기기의 뷰포트 또는 특정 요소와 교차한다. 특정 요소는 Intersection Observer API의 목적에 따라 루트 요소 혹은 루트라고 불린다.
- observer가 최초로 대상 요소를 관찰하라고 요청 받은 시점에 실행한다.
타겟 요소와 타겟 요소의 루트 사이의 교차의 정도는 intersection ratio이다. 0.0과 1.0 사이의 값으로 보이는 대상 요소의 백분율로 나타낸다.
옵저버 생성하기
let options = {
root: document.querySelector("#scrollArea"),
rootMargin: "0px",
threshold: 1.0,
};
let observer = new IntersectionObserver(callback, options);intersection Observer는 생성자를 호출하고 threshold가 한 방향 혹은 다른 방향으로 교차할 때마다 callback 함수를 전달하여 생성한다.
교차 관찰자 옵션
-
root: 대상 가시성을 체크하기 위한 뷰포트로 사용되는 요소. 반드시 타겟의 상위 요소이어야 한다. 만약 뷰포트를 지정하지 않거나 null이면 브라우저 뷰포트가 기본 설정된다. -
rootMargin: 루트 주위의 여백. CSS margin 속성과 비슷한 값을 가질 수 있다. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있다. 이 값의 집합은 교차 지점을 계산하기 전에 루트 요소 경계 박스의 각 사이드 값을 늘리거나 줄일 수 있다. 기본 값은 0이다. -
threshold: 관찰자의 콜백이 무조건 실행되어야 하는 대상의 가기성 백분율을 나타내는 숫자 혹은 숫자배열이다. 만약 가시성이 50% 넘는 경우만 감지하고 싶으면 0.5를 지정한다. 25%가 지날때 마다 실행하고싶으면 [0,0.25,0.5,0.75,1]을 지정해서 사용한다. 기본값은 0이다.
관찰 대상 지정하기
let target = document.querySelector("#listItem");
observer.observe(target);
// observer를 위해 설정한 콜백은 바로 지금 최초로 실행됩니다
// 대상을 관찰자에 할당할 때까지 기다립니다. (타겟이 현재 보이지 않더라도)콜백
let callback = (entries, observer) => {
entries.forEach((entry) => {
// 각 엔트리는 관찰된 하나의 교차 변화을 설명합니다.
// 대상 요소:
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
});
};
