[JS]Intersection Observer API

정의

타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법
즉, 그들이 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 등록할 수 있게 합니다.
(즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 브라우저는 원하는 대로 교차 영역 관리를 최적화 할 수 있습니다.)

기능

아래 두가지 상황에 콜백함수를 호출함.

1. 대상(target) 으로 칭하는 요소가 기기 뷰포트나 특정 요소(이 API에서 이를 root 요소 혹은 root로 칭함)와 교차함.
2. observer가 최초로 타겟을 관측하도록 요청받을 때마다.

사용법

// 선택적 options를 정의한다.
let options = {
  root: document.querySelector("#scrollArea"), // default = 뷰포트
  rootMargin: "0px",
  threshold: 1.0,
};

// callback을 정의한다.
let callback = (entries, observer) => {
  entries.forEach((entry) => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

// observer를 정의한다.
let observer = new IntersectionObserver(callback, options);

// observer를 달아둘 target을 정의한다.
let target = document.querySelector("#listItem");

// observer가 target을 observe한다.
observer.observe(target);

• callback함수에서 사용되는 entry(input)
• 참고자료