Intersection Observer API 사용하기

Intersection Observer

현재 웹 페이지의 우측부분에 인디케이터(현재 페이지가 어디인지 알려주는 UX 디자인)을 만들기 위해 Intersection Observer를 활용해보기로 했다.

 

Intersection Observer는 Target Element가 화면에 노출되었는지를 보여주는 API이다. scroll 이벤트를 활용하는 것과는 달리 성능에 이점을 가진다. 자세한 설명은 다른 블로그에서 잘 설명했으므로 생략하겠다.

 

 

활용방법

기본적으로 Intersection Observer는 변수에 IntersectionObserver 인스턴스를 할당하고, 관찰 하고자 하는 element를 할당해주어서 작동한다.

const observer = new IntersectionObserver(callback, options);

observer.observe(element);

위 코드에서 볼 수 있듯이, IntersectionObserver는 callback 인수와 options인수를 받는다.

 

 

 

먼저 options에는 observer의 관찰 범위는 어떻게 되는지(root와 rootMargin), 얼마나 드러나야 관찰된 것으로 볼지(threshold, 비율)등에 대해 설정 할 수 있다.

let options = { threshold: 1.0 , root : null }

자세한 옵션은 Intersection Observer API - Web APIs | MDN 를 통해 확인 가능하다.

 

 

 

다음은 callback 인수인데, callback은 entries, observer를 인수로 갖는다.

callback -> (entries, observer) => { 실행할 내용 }

여기서 entries는 IntersectionObserverEntry 인스턴스의 배열로, 다음의 읽기 전용의 속성을 갖는다.

• boundingClientRect: 관찰 대상의 사각형 정보
• intersectionRect: 관찰 대상의 교차한 영역 정보
• intersectionRatio: 관찰 대상의 교차한 영역 백분율
• isIntersecting: 관찰 대상의 교차 상태(Boolean, 주로 사용하는 속성!)
• rootBounds: 지정한 루트 요소의 사각형 정보
• target: 관찰 대상 요소
• time: 변경이 발생한 시간 정보

각각의 요소와 설명은 IntersectionObserverEntry - Web APIs | MDN 에 설명이 잘 되어있으니, 참고하길 바란다.

 

 

 

이 부분에서 entries가 정확히 무엇을 뜻하는 것인지 이해가 잘 되지 않아, 추가로 찾아봤다.

IntersectionObserver.observe() - Web API | MDN 에서 찾아본 결과, 나중에 지정하게 될 "주시 대상 요소"가 역치(threshold)를 통과하는 순간 Observer의 Callback이 호출되게 되고, 이때 역치를 통과한 요소를 나타내는 IntersectionObserverEntry의 배열을 Callback 매개변수로 제공한다. 라고 되어있다. 활성화되어있는 모든 요소를 IntersectionObserverEntry 배열로 만들어서 전달한다는 것 같다.

그외에 observer는 callback을 발생시킨 observer 자신을 반환한다는 내용인것 같다.(확실치 않음)

 

 

완성된 코드

var options = { 옵션 내용 };

const ob = IntersectionObserver((entries, observer) =>{

    실행시킬 내용

}, options);

ob.observe( 관측할 element );