Intersection Observer API로 스크롤 이벤트 다루기

Intersection Observer API 란?

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.
즉, 타겟 요소가 viewport에 보이는 순간을 파악합니다.

Intersection 정보는 아래와 같은 여러가지 이유 때문에 필요합니다.

• 페이지가 스크롤 되는 도중에 발생하는 다른 컨텐츠의 지연 로딩
• infinite-scroll 을 구현
• 광고 수익 계산을 하기 위해 광고의 노출 정도 파악
• 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정
• 사용자의 선택에 따른 다음 작업이나 애니메이션 수행 여부 결정

Intersection Observer 생성

const options={
	root : document.querySelector('#viewport'),
  	//뷰포트 요소로, 기본 값은 브라우저 뷰포트 입니다.
  	rootMargin: "10px 20px 30px 40px",
  	// root가 가진 여백 => (top, right, bottom, left) 순서
  	threshold: 0
  	// 콜백 실행 대상(즉 타겟 요소)의 노출 퍼센트
  	// 0 ~ 1 값으로 지정 (예, 1.0의 경우, 타겟 요소의 전체가 뷰포트에 노출되었을 때 콜백이 실행
};
const callback=(entries, observer) => {
	entries.forEach(entry=>{
    	// entries는 observer에 의해 탐지되는 타겟요소들의 집합
    	// 각 entry(타겟요소)가 지니는 속성 =>
    	//   entry.boundingClientRect
    	//   entry.intersectionRatio
    	//   entry.intersectionRect
    	//   entry.isIntersecting
    	//   entry.rootBounds
    	//   entry.target
    	//   entry.time
    });
};
const io = new IntersectionObserver(callback, options); //observer 초기화
io.observer(target); // 타겟 요소 등록
//io.unobserber(target) : 타겟 요소 등록 해제

예제

View code with CodeSandbox

설명

5개의 DIV가 세로로 나열되어 있습니다. 스크롤에 따라 뷰포트에 노출되는 DIV의 배경색이 하늘색으로 변하며, 해당 DIV의 번호가 왼쪽 상단에 표시됩니다. 그리고 가장 마지막에 도달하여 'indicator'가 보일 때 왼쪽 상단에 'SCROLL END'라고 표시됩니다.

추후에 이 기능을 hooks로 만들어 해당 글을 수정할 예정이며, 또한 리액트에서 Intersection Observer API를 쉽게 사용할 수 있는react-intersection-observer에 대한 글을 추가할 예정입니다.