Intersection Observer API

뷰포트와 대상 요소(이미지, 텍스트 등)의 교차에서 변경 사항을 비동기식으로 관찰하는 방법을 제공하는 API

 

-> element를 감시하고 해당 요소가 유저에게 표시되는 시점을 알려줌

 

필요한 이유

평소 스크롤 이벤트를 콜백으로 처리할 경우 짧은시간내에 많은 이벤트가 동기적으로 실행될 수 있음(광고, lazy loading, 무한 스크롤 등)

과거에는 이런처리에 Element.getBoundingClientRect() 를 사용하여 메인 스레드에서 실행하기때문에 성능문제에서 자유로울수 없었음

신뢰도 있는 공식 API의 필요성

 

사용법

const circle = document.getElementById('circle');

const observer = new IntersectionObserver(
  (items) => {
    console.log(items);
  }
);

observer.observe(circle);

• boundingClientRect: 대상과 교차점에 대한 정보(관찰 대상의 사각형 정보)

• intersectionRect: 대상의 보이는 영역의 X, Y좌표와 크기만 제공하는 객체(관찰대상과 루트 요소와 교차하는 영역에 대한 사각형 정보)

• isIntersecting: 대상이 화면에 표시되는지 여부

options

---

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

• root: 대상이 보이는 기준이되는 뷰포트(대상의 조상이어야하고 지정되지 않은경우 브라우저의 뷰포트가 기본값)

• rootMargin: root 주위에 여백

• threshold: 임계점, 대상이 보이는 비율을 나타냄(배열로 전달하여 ex - [0, 0.25, 0.5, 0.75, 1] 처럼 25%를 지날때마다 콜백이 호출되도록 할수 있음

 

경고! 
콜백은 메인 스레드에서 실행되며 가능한 빠르게 처리되어야함
시간이 길게 걸리는 콜백은 window.requestIdleCallback() 을 사용

 

 

Methods

---

• observe(targetElement) : 타겟 요소에 대한 관찰을 시작합니다.
• unobserve(targetElement) : 해당 대상 요소의 교차 감지만 중단하며, Observer 객체의 다른 대상 요소들에 대한 관찰은 유지됩니다. 즉, Observer 객체의 상태는 유지된 채로 대상 요소 중 하나만 교차 감지를 멈춥니다.
• disconnect() : Observer 객체의 모든 대상 요소들과의 관찰을 중단하고 Observer 객체 자체를 끝내는 역할을 합니다. 따라서 disconnect() 메소드를 호출하면 Observer 객체는 더 이상 어떠한 교차도 감지하지 않으며, 필요한 경우 다시 초기화해야 합니다.

 

사용범위

---

• 스크롤 도중 발생하는 이미지나 다른 컨텐츠의 lazy loading -> 대상이 보이면 url을 이미지 src에 주입, unobserve필수
• 무한스크롤
• 광고수익 계산을 위한 광고의 가시성 보고
• 사용자에게 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정

 

한계점

---

고속 스크롤(내용을 확인하지않고 빠르게 내리는 경우)과 일반적인 스크롤 구분이 어려워 
스크롤링을 멈췄을때 1회가 아닌 뷰포트에 교차되는 매 순간 요청을 보내게됨
따라서, 통계를 위한 요청을 보낼때 사용하는 경우는 전통적인 scroll이벤트 로직이 적합

 

 

2016 구글 개발자 페이지를 통해 소개되어 호환이 어느정도 안정화된것으로 보임

 

 

 

참고문서

https://heropy.blog/2019/10/27/intersection-observer/

Intersection Observer - 요소의 가시성 관찰

https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC

실무에서 느낀 점을 곁들인 Intersection Observer API 정리

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web APIs | MDN

https://www.youtube.com/watch?v=iZhq7I42uaI