Intersection Observer를 알아보자

Intersection Observer란?

---

한국말로 직역하면 교차지점 관찰자이다.

Intersection Observer는 Intersection Observer API의 인터페이스 중 하나이며, 개발자가 타겟으로 잡은 요소와 타겟의 상위 요소(또는 최상위 요소인 뷰포트)가 서로 교차하는 범위에 따라 비동기적으로 이를 감지할 수 있게 해준다.

편의상,

콜백을 통해 변화를 주고 싶은 요소를 " 타겟 "
변화가 일어나는 기점이 되는 타겟의 상위 요소를 " 루트 " 라 명명.

Intersection Observer 생성하기

new IntersectionObserver(callbackFn(Entries, Observer), [options]);

IntersectionObserver는 콜백함수(callbackFn)와 옵션(options)을 매개 변수로 받는다.

callbackFn

타겟과 타겟의 루트가 교차되었을 때 호출되는 콜백함수이고, Entries와 Observer를 매개변수로 받는다.

• Entries
  타겟을 나타내는 IntersectionObserverEntry 객체의 배열.

• Observer
  콜백을 호출한 IntersectionObserver.

options

타겟과 타겟의 루트가 교차되는 기준을 조절할 수 있는 객체이다. 기본값은 문서의 뷰포트를 루트로 잡고 여백 없이 루트 안에 타겟이 1픽셀이라도 보이면 콜백을 호출하는 걸로 설정된다.

• root
  타겟의 루트. 타겟의 상위 Element 또는 Document. 루트의 바운딩 박스를 기준으로 타겟이 감지됨.

• rootMargin
  루트의 바운딩 박스에 적용할 오프셋을 나타내는 문자열. css margin과 유사한 속성값을 사용. 기본값은 top right bottom left 순으로 "0px 0px 0px 0px".

• threshold
  타겟 영역과 루트 영역의 교차 범위(0.0 ~ 1.0(단위: %))의 단일 숫자 또는 숫자 배열. 지정한 범위값에 콜백함수 호출.
  값이 0.0 : 겹치자마자 콜백 호출.
  값이 0.5 : 50% 겹쳤을 때 콜백 호출.
  값이 1.0 : 완전히 겹쳤을 때 콜백 호출.

IntersectionObserverEntry Properties

• .boundingClientRect
  타겟의 사각형 경계에 관한 값을 반환. 경계는 Element.getBoundClientRect()에서 계산된 값.

• .intersectionRatio
  타겟과 루트의 교차 비율(0.0 ~ 1.0)을 반환.

• .intersectionRect
  타겟과 루트의 교차 영역에 대한 정보를 반환.

• .isIntersecting
  타겟과 루트가 교차된 상태(교차된 상태라면 true, 아니라면 false)를 반환.

• .rootBounds
  루트에 대한 정보 반환. 기본값은 viewport.

• .target
  타겟 요소를 반환.

• .time
  타겟과 루트의 교차 시점을 반환.