Intersection Observer API

Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지를 비동기적으로 감지하는 방법을 제공한다. 이 API는 무한 스크롤, 지연 로딩, 광고 노출 감지 등을 구현하는 데 특히 유용하다.

전체적인 구성은 크게 3가지 단계로 구성된다. 1) 노드를 관찰할 새로운 intersectionObserver를 생성하면서 2) 관찰되었을 때 수행할 작업과 관찰 방식을 정의하며 3) observe 메소드를 사용해 관찰할 노드를 등록해주는 것이다. 바닐라JS에서 일반적으로 사용되는 코드의 모습은 아래와 같다.

let target = document.querySelector('#target');

const observer = new IntersectionObserver(callback, options);

observer.observe(target);

 

IntersectionObserver 객체의 콜백과 옵션

노드를 관찰할 새로운 intersectionObserver를 생성할 때, 특정 노드를 관찰하는 방법에 대한 옵션 객체와 관찰했을 때 수행할 작업을 콜백 함수로 등록해주게 된다.

콜백 함수는 대상 요소가 교차할 때마다 호출되며, 교차 정보를 담은 IntersectionObserverEntry 객체를 인자로 받는다. 이 객체의 isIntersecting 프로퍼티를 통해 요소가 교차 영역에 들어가 있는지 확인할 수 있다. 옵션 객체는 대상 요소가 '무엇과' 교차해야 콜백 함수를 호출할 것인지, '얼마나' 교차해야 콜백 함수를 호출할 것인지 등을 정해준다.

 

옵션 객체

IntersectionObserver의 옵션 객체는 교차를 감지하는 방법을 정의하는 데 사용된다. 옵션 객체는 다음 세 가지 속성을 가지게 된다.

let observer = new IntersectionObserver(callback, {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
});

• root
  대상 가시성을 체크하기 위한 뷰포트로 사용되는 요소로 반드시 타겟의 상위 요소이어야 한다. 만약 뷰포트를 지정하지 않거나 null 이면 브라우저 뷰포트가 기본으로 설정된다.
• rootMargin
  교차를 감지하는 영역을 root의 경계 밖으로 확장하거나 축소하는 데 사용되는 마진 값을 결졍한다. 값은 CSS 마진과 같은 방식으로 지정하며, 기본값은 '0px'이다.
• threshold
  관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시 정도를 나타내는 숫자 또는 숫자 배열. 만약 가시성이 50% 지점을 넘는 경우만 감지하고 싶다면, 0.5를 지정하면 된다.
  만약 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, [0, 0.25, 0.5, 0.75, 1]와 같이 배열을 이용할 수 있다. 기본 값은 0 이고, 1픽셀이라도 보이면 바로 콜백 함수가 호출된다.

옵션 객체는 교차를 어떻게 감지할지를 정의한다. root는 교차를 감지할 기준이 되는 요소이며, rootMargin은 root의 마진을 정의하고, threshold는 대상 요소가 얼마나 교차해야 콜백이 호출되는지를 결정한다. 이 세 가지 옵션을 사용해 세밀한 교차 감지 조건을 설정할 수 있다.

 

콜백 함수

IntersectionObserver의 콜백 함수는 두 개의 인자를 받는다. 첫번째로는 감시하고 있는 모든 요소를 담고 있는 배열 entries를 받고, 두번째로는 IntersectionObserver 객체 자신을 호출하는 observer이다. 이를 통해 감시를 중단하거나, 모든 감시를 중단하고 관찰자를 해제하는 데 사용되는 unobserve나 disconnect 등의 메서드를 호출할 수 있다.

let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
        // 교차가 발생했을 때 수행할 작업
        if (entry[0].isIntersecting) {
            console.log('Element has intersected');
        }
    });
}, { root: null, rootMargin: '0px', threshold: 0.1 });

IntersectionObserver의 콜백 함수는 어떤 요소의 교차가 시작되거나 끝날때 (혹은 화면에 나타나고 사라질 때) 두 번 호출된다. 따라서 교차가 시작될 때만 작업을 수행하고 싶다면 inIntersecting 프로퍼티를 이용하면 된다. intersectionRatio 프로퍼티는 어떤 요소가 어느정도 교차되었는지를 0~1 단위로 반환한다. (50% 면 0.5 반환).

 

관찰할 요소 지정

우선 한 가지 짚고 넘어가야 할 것은, 이미 콜백 함수에서 잠깐 이야기를 하긴 했지만, Intersection Observer API의 observe 메소드를 사용하여 하나의 노드만 관찰할 수 있는 건 아니라는 것이다. 여러 노드를 하나의 observer 객체로 관찰할 수 있고, 이것들은 순서대로 콜백 함수의 entries에 배열로 들어가게 된다.