[JavaScript] IntersectionObserver API란?

 

IntersectionObserver API에 대해 알아보겠습니다.

 

 

 

🧑🏻‍💻 IntersectionObserver API

IntersectionObserver는 웹 API 중 하나로, 요소의 가시성 여부를 비동기적으로 감지하는 기능을 제공합니다. 이를 통해 무한 스크롤, 화면 리사이징, 이미지 로딩 지연, 트래킹 및 애니메이션 효과 등에서 유용하게 활용됩니다

 

 

Intersection Observer의 주요 개념과 사용법을 설명해 드리겠습니다.

 

 

📌 사용법

1. InterSection Observer 생성

const observer = new IntersectionObserver(callback, options);

 

Intersection Observer를 생성하려면 콜백 함수(callback)와 옵션(options)을 전달해야 합니다. 콜백 함수는 가시성 변경 시 실행되는 로직을 정의하며, 옵션은 관찰 동작을 설정하는 데 사용합니다. 

 

 

2. InterSection Observer callback function

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    // entry의 가시성 상태를 확인하고 로직을 수행
    if (entry.isIntersecting) {
      // 요소가 화면에 진입한 경우
    } else {
      // 요소가 화면에서 벗어난 경우
    }
  });
};

 

콜백 함수는 두 개의 파라미터인 'entries'와 'observer'를 받습니다. 'entries'는 관찰 대상의 요소의 배열입니다. 각 'entry'는 하나의 관찰 대상 요소와 관련된 정보를 포함하며, 'isIntersectiong" 속성을 통해 가시성 여부를 확인할 수 있습니다.

 

 

3. InterSection Observer 옵션 

const options = {
  root: document.querySelector("#root"), // 관찰자의 뷰포트를 기준으로 요소의 가시성을 판단
  rootMargin: "0px", // 관찰자의 뷰포트를 확장하거나 축소하여 가시성을 변경
  threshold: 0.5, // 관찰 대상 요소와 뷰포트의 교차 영역이 어느 정도 보여야 가시성으로 간주할지 설정 (0.0 ~ 1.0)
};

 

옵션은 Intersection Observer의 동작을 설정하는 데 사용됩니다. 'root'는 관찰자의 뷰포트 요소를 지정하며, 기본값은 브라우저의 뷰포트입니다. 'rootMargin'은 관찰자의 뷰포트를 확장하거나 축소하여 교차 영역을 보정할 수 있습니다. 'threshold'는 교차 영역이 어느 정도 보여야 가시성으로 간주할지 설정합니다.

 

 

4. InterSection Observer 관찰 시작 

observer.observe(target);

 

'observe' 메서드를 사용하여 관찰 대상 요소를 등록합니다. 'target'은 관찰할 요소를 의미하며, 'querySelector'나 변수 등을 통해 선택할 수 있습니다. 

 

 

5. InterSection Observer 관찰 종료

observer.unobserve(target);

 

'unobserve' 메서드를 사용하여 관찰 대상 요소의 관찰을 종료합니다. 이는 필요에 따라 관찰을 중지할 때 사용됩니다. 

 

🧑🏻‍💻 예시

See the Pen Untitled by hyun zeng (@hyun-zeng) on CodePen.

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20