[자바스크립트] 화면(뷰포트)에 특정 요소가 떴을 때 감지하는 방법 - Intersection Observer

 

 

Intersection Observer

 

 

Intersection Observer는 웹 브라우저에서 제공하는 API 중 하나로,

요소가 다른 요소나 브라우저 viewport와 교차하는지 여부를 감지하는 기능을 제공한다.

예를 들어, 스크롤을 내렸을 때 화면에 보이는 이미지나 다른 요소를 로드하기 전에

 

Intersection Observer를 사용하여 해당 요소가 브라우저 viewport 안에 있는지 감지하고,

그 후에 해당 요소를 로드할 수 있다.

이를 통해 불필요한 리소스 로드를 줄일 수 있으며, 페이지 로딩 속도를 향상시킬 수 있다.

Intersection Observer는 요소의 가시성 여부를 지속적으로 감시하고, 이벤트를 발생시킨다.

 

이벤트는 요소가 viewport에 나타날 때, 사라질 때, 일부분만 나타날 때 등 다양한 상황에서 발생할 수 있다.

Intersection Observer는 모바일 기기에서의 성능이 더욱 향상되며, 상대적으로 덜 복잡한 코드를 작성할 수 있다.

또한, 스크롤, 리사이즈, CSS 애니메이션 등 다양한 이벤트와 함께 사용할 수 있어서 다양한 상황에서 활용할 수 있다.

 

 

 

---

 

사용법

 

1. IntersectionObserver 객체 생성

 

IntersectionObserver를 사용하기 위해서는 먼저 객체를 생성해야 한다.

객체를 생성할 때는 콜백 함수와 옵션을 전달한다.

 

const observer = new IntersectionObserver(callback, options);

 

callback

 

IntersectionObserver가 감지할 때 실행할 콜백 함수

콜백 함수에는 인자로 entries와 observer가 전달된다.

 

entries - 관찰 대상 요소의 정보를 담고 있는 객체
observer - IntersectionObserver 객체 자체

 

options

 

 IntersectionObserver 설정을 지정한다.

root, rootMargin, threshold 등의 속성을 설정할 수 있다.

 

root: 관찰 대상 요소의 가시성을 판단할 때 기준이 되는 요소
rootMargin: root 요소의 여백을 지정한다.
threshold: 관찰 대상 요소의 가시성 비율을 지정한다.

 

root와 rootMargin은 둘 중 하나만 지정할 수 있다.

threshold는 배열 형태로 지정할 수 있다.

threshold의 기본값은 0이다.
0은 관찰 대상 요소가 뷰포트에 1px이라도 들어오면 콜백 함수가 실행됨을 의미하고,
1은 관찰 대상 요소가 뷰포트에 전부 들어와야 콜백 함수가 실행됨을 의미한다.

 

 

 

2. 관찰 대상 요소 지정

 

IntersectionObserver로 관찰할 대상 요소를 지정해야 한다.

observe() 메소드를 사용하여 대상 요소를 지정한다.

 

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

 

 

3. 콜백 함수 작성

 

IntersectionObserver가 감지할 때 실행할 콜백 함수를 작성한다.

콜백 함수에는 아까 위에 말했듯이 entries와 observer가 인자로 전달된다.

 

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`${entry.target} is intersecting`);
    } else {
      console.log(`${entry.target} is not intersecting`);
    }
  });
}

 

각 entry 객체에는 여러 정보들이 포함되어 있다.

 

entry.target: IntersectionObserver가 감지한 대상 요소
entry.isIntersecting: 대상 요소가 뷰포트에 들어온 경우 true가 반환
entry.intersectionRatio: 대상 요소가 뷰포트에 들어온 비율을 반환
entry.intersectionRect: 대상 요소가 뷰포트에 들어온 영역의 정보를 반환
entry.boundingClientRect: 대상 요소의 정보를 반환
entry.rootBounds: root 요소의 정보를 반환
entry.time: 관찰이 시작된 시간을 반환

 

 

4. IntersectionObserver 객체 해제

 

IntersectionObserver 객체를 해제할 때는 unobserve() 메소드를 사용한다.

 

observer.unobserve(target);

 

 

 

위와 같이 IntersectionObserver를 사용하면 뷰포트에 나타나는 요소를 감지하고,

콜백 함수를 통해 이벤트를 처리할 수 있다.

 

 

---