Web API IntersectionObserver를 활용한 스크롤 관리 방법

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

IntersectionObserver - Web API | MDN

1. IntersectionObserver란?

IntersectionObserver는 웹 API로, 특정 요소가 뷰포트(화면 영역) 안에 들어오거나 나가는 시점을 감지하고, 이에 따라 콜백 함수를 실행할 수 있는 기능을 제공합니다.

무한 스크롤, 레이지 로딩, 애니메이션 트리거 등 다양한 상황에서 활용할 수 있습니다.

2. IntersectionObserver 사용하기

IntersectionObserver를 사용하기 위해서는 먼저 observer 인스턴스를 생성해야 합니다. 이 인스턴스를 통해 특정 요소를 관찰할 수 있습니다.

2.1 Observer 인스턴스 생성

IntersectionObserver 인스턴스를 생성할 때, 첫 번째 인자는 콜백 함수이며, 두 번째 인자는 옵션 객체입니다. 옵션 객체는 필수는 아니며, 필요에 따라 전달할 수 있습니다.

const observer = new IntersectionObserver(callbackFunction, options);

• 콜백 함수(callbackFunction): 요소가 화면에 들어오거나 나갈 때 호출됩니다.
• 옵션 객체(options): 관찰에 대한 설정을 정의할 수 있으며, 이는 생략할 수 있습니다.

2.2 요소 관찰하기

observer 인스턴스를 생성한 후, 특정 요소를 관찰하도록 명령할 수 있습니다. 이를 위해 observe 메소드를 사용합니다.

observer.observe(element); // element는 관찰할 DOM 요소

이렇게 설정하면, element가 화면에 진입하거나 사라질 때마다 지정한 콜백 함수가 호출됩니다.

3. 콜백 함수와 entries

콜백 함수는 entries와 observer 두 가지 인자를 받습니다. entries는 관찰 중인 각 요소에 대한 정보를 담은 배열이며, 배열의 각 항목을 entry라고 합니다. entry는 다양한 속성을 통해 관찰 대상 요소의 상태를 설명합니다.

const callbackFunction = (entries, observer) => {
  entries.forEach(entry => {
    console.log(entry); // entry의 다양한 속성을 확인 가능
  });
};

3.1 entry의 주요 속성들

• boundingClientRect: 관찰 대상 요소의 경계 사각형 정보입니다. 요소의 크기와 위치를 나타내는 DOMRect 객체를 반환합니다.
• intersectionRatio: 관찰 대상 요소가 뷰포트와 얼마나 겹치는지를 비율로 나타냅니다. 0은 겹치지 않음을, 1.0은 완전히 겹침을 의미합니다.
• intersectionRect: 관찰 대상 요소와 뷰포트가 겹치는 부분의 DOMRect 객체를 반환합니다.
• isIntersecting: 요소가 뷰포트에 들어오고 있는 중인지, 나가고 있는 중인지를 나타냅니다. 이 값이 true이면 요소가 현재 뷰포트에 들어오고 있는 중이라는 의미이고, false이면 요소가 뷰포트에서 나가고 있는 중이라는 뜻입니다.
• rootBounds: 뷰포트의 경계를 나타내는 DOMRect 객체를 반환합니다. 관찰자가 특정 요소에 대해 root 옵션을 설정했을 경우, 그 root 요소의 경계를 나타냅니다.

4. threshold와 isIntersecting를 이용한 예제

다음은 isIntersecting과 threshold를 활용한 간단한 예제입니다. 이 예제는 요소가 화면에 50% 이상 보일 때 텍스트를 변경합니다.

const callbackFunction = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      entry.target.textContent = "화면에 50% 이상 보이고 있습니다!";
      entry.target.style.backgroundColor = "#000";
      entry.target.style.color = "#fff";
    } else {
      entry.target.textContent = "50% 이하만 보이고 있습니다.";
      entry.target.style.backgroundColor = "#fff";
      entry.target.style.color = "#000";
    }
  });
};

const options = {
  threshold: [0.5] // 요소가 50% 이상 보일 때 콜백이 실행됨
};

const observer = new IntersectionObserver(callbackFunction, options);
const targetElement = document.querySelector('#targetElement');

observer.observe(targetElement);

5. 옵션 객체의 세부 설명

옵션 객체는 IntersectionObserver의 동작 방식을 세밀하게 설정할 수 있습니다.

• root: 교차할 뷰포트의 기준 요소를 설정합니다. 기본값은 null이며, 이는 브라우저의 뷰포트가 기준이 됨을 의미합니다. 특정 요소를 기준으로 설정할 수도 있습니다.
• rootMargin: 뷰포트의 크기를 조정할 수 있는 여백을 설정합니다. CSS와 유사한 형식으로 작성하며, 예를 들어 rootMargin: '0px 0px -50px 0px'는 뷰포트 아래쪽에 50픽셀의 여유를 둡니다. 이 경우, 요소가 실제 화면에 보이기 50픽셀 전에 콜백이 실행될 수 있습니다.
• threshold: 요소가 얼마나 보일 때 콜백을 실행할지를 설정합니다. threshold: 0은 요소가 1%라도 보이면 실행되며, threshold: 1.0은 요소가 완전히 보여야 실행됩니다. 배열로 여러 개의 값을 설정할 수도 있습니다.

const options = {
  threshold: [0, 0.5, 1.0] // 요소가 0%, 50%, 100% 보일 때마다 콜백 실행
};

6. 관찰 중지: unobserve

unobserve 메서드는 IntersectionObserver가 특정 요소에 대한 관찰을 중지하도록 하는 기능을 제공합니다.

예를 들어, 한 번 로드된 콘텐츠에 대해서는 추가적인 감지가 필요 없을 때 unobserve를 사용하여 관찰을 중지할 수 있습니다.

observer.unobserve(targetElement);