[JavaScript] Intersection Observer API 사용하기

홈페이지를 만들다보면 스크롤 이벤트를 활용하는 경우가 많다.

EventTarget.addEventListener() 메서드와 Element.getBoundingClientRect() 메서드를 사용해 기준이 되는 요소의 위치에 따라 스크롤 여부를 감지해 효과를 줄 수 있지만 이 방식은 성능에 지장을 줄 수 있다.

싱글스레드 언어인 JavaScript의 특성 때문인데 이 부분은 추후 기회가 되면 포스팅해보겠다.

 

Intersection Observer API가 뭔데?

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web APIs | MDN

 

해당 API에 대한 설명은 공식 문서에 자세히 기록되어있고, 그 내용들을 그대로 가져오는것은 별 의미가 없다고 생각해 우선 링크로 대체했다.

하지만 매우 간략하게 설명하자면, '특정 요소의 위치가 기준이 되는 영역 안에 존재할때만 스크롤 이벤트가 실행된다' 라고 생각하면 될 것 같다.

 

어떻게 사용하는데?

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

IntersectionObserver - Web APIs | MDN

 

자세한 사용법 또한 문서에 나와있지만, 내가 사용하면서 꼭 필요했던 부분만 추가로 설명하려 한다. 아마.. 대다수의 홈페이지는 이정도만 적용해도 구현하는데 크게 문제는 없을것이다.

 

const options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

const callback=(entries)=>{
  entries.forEach((item)=>{
    if(item.isIntersecting){
      // 실행해야 할 내용(ex. 스크롤 이벤트)
    }
  });
}

const observer = new IntersectionObserver(callback, options);

observer.observe('#targetElement');

 

 

먼저 options 객체와 callback 함수를 정의하고 new 키워드를 를 통해 인스턴스를 생성한 다음 파라미터로 전달한다.

 

options 객체는 IntersectionObserver 인스턴스의 속성을 정의한다.

• root : 관찰하려는 요소의 관찰자 역할을 한다. 당연히 타겟 요소보다 상위(부모 또는 조상) 요소이다. 따로 지정하지 않거나 null로 둔다면 브라우저의 Viewport가 관찰자가 된다.
• rootMargin : 관찰자의 범위를 확장시키는 용도이다.
• threshold : 관찰 요소가 노출된 정도를 나타낸다. 예를 들어 0.5로 설정할 경우 타겟 요소가 50% 정도로 보이면 callback 함수가 실행된다. [ ]로 묶어 여러 지점에서 callback함수를 실행시키는것 또한 가능하다. (ex. [0, 0.75, 1])

 

callback 함수는 타겟 요소가 관찰되는 시점에 실행될 함수를 정의하면 된다. 여기서 주의할 점은 callback 함수의 파라미터인 entries가 배열 형식으로 반환되기 때문에 관찰 요소가 단일 타겟이더라도 forEach문을 통해 순환하여 실행되어야 정상적으로 작동한다. (혹시 다른 효율적인 방법이 있는지는 잘 모르겠다..)

 

options와 callback 함수를 모두 선언했다면 생성된 인스턴스와 observe() 메서드에 타겟 요소를 파라미터로 전달해 실행하면 된다.

 

이 외에 타겟 요소의 관찰을 중지하는 disconnect(), 관찰된 모든 대상의 객체 배열을 반환하는 takeRecords(), 특정 대상에 대한 관찰을 중지하는 unobserve() 메서드가 있으니 필요한 경우 적절하게 사용하면 되겠다.