IntersectionObserver

IntersectionObserver는 자바스크립트 API로, DOM 요소가 뷰포트나 특정 부모 요소와 교차(intersect)하는 시점을 비동기적으로 관찰할 수 있게 해준다.

 

따라서 주로 lazy loading, 무한 스크롤, 요소 노출 감지 등에 활용된다.

 

주요 특징

 

1. 성능 최적화 : 스크롤 이벤트를 직접 사용하는 방식보다 효율적이며, 브라우저 성능에 미치는 영향을 최소화한다.
2. 비동기적 처리 : 교차 상태를 감지하는 콜백이 비동기로 실행된다.
3. 다양한 관찰 옵션 : threshold, root, rootMargin 등 다양한 조건을 설정할 수 있다.

 

구성

 

1. IntersectionObserver 생성

const observer = new IntersectionObserver(callback, options);

 

• callback : 교차 상태 변화 시 호출될 함수
• options : 관찰 조건 설정 객체
  • root : 교차 여부를 감지할 기준 요소 (기본값: 뷰포트)
  • rootMargin : 기준 요소의 바깥 여백 (CSS 형식)
  • threshold : 교차 상태를 판별할 기준 값(0~1)

 

2. DOM 요소 관찰

observer.observe(targetElement);

 

 

3. 관찰 해제

observer.unobserve(targetElement);

 

 

예제

 

// 관찰 대상 요소가 뷰포트에 나타날 때 로깅하는 예제
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 뷰포트에 진입했습니다!');
    }
  });
};

const options = {
  root: null, // 뷰포트 기준
  rootMargin: '0px', // 여백 없음
  threshold: 0.5 // 요소의 50% 이상이 보일 때 트리거
};

const observer = new IntersectionObserver(callback, options);

const target = document.querySelector('#targetElement');
observer.observe(target);