한국말로 직역하면 교차지점 관찰자이다.
Intersection Observer는 Intersection Observer API의 인터페이스 중 하나이며, 개발자가 타겟으로 잡은 요소와 타겟의 상위 요소(또는 최상위 요소인 뷰포트)가 서로 교차하는 범위에 따라 비동기적으로 이를 감지할 수 있게 해준다.
편의상,
콜백을 통해 변화를 주고 싶은 요소를 " 타겟 "
변화가 일어나는 기점이 되는 타겟의 상위 요소를 " 루트 " 라 명명.
new IntersectionObserver(callbackFn(Entries, Observer), [options]);
IntersectionObserver는 콜백함수(callbackFn)와 옵션(options)을 매개 변수로 받는다.
타겟과 타겟의 루트가 교차되었을 때 호출되는 콜백함수이고, Entries와 Observer를 매개변수로 받는다.
Entries
타겟을 나타내는 IntersectionObserverEntry 객체의 배열.
Observer
콜백을 호출한 IntersectionObserver.
타겟과 타겟의 루트가 교차되는 기준을 조절할 수 있는 객체이다. 기본값은 문서의 뷰포트를 루트로 잡고 여백 없이 루트 안에 타겟이 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 : 완전히 겹쳤을 때 콜백 호출.
.boundingClientRect
타겟의 사각형 경계에 관한 값을 반환. 경계는 Element.getBoundClientRect()에서 계산된 값.
.intersectionRatio
타겟과 루트의 교차 비율(0.0 ~ 1.0)을 반환.
.intersectionRect
타겟과 루트의 교차 영역에 대한 정보를 반환.
.isIntersecting
타겟과 루트가 교차된 상태(교차된 상태라면 true, 아니라면 false)를 반환.
.rootBounds
루트에 대한 정보 반환. 기본값은 viewport.
.target
타겟 요소를 반환.
.time
타겟과 루트의 교차 시점을 반환.