Intersection Observer API

portfolio project에서 scrolling 할 때, 화면에 보여지는 section을 navbar에서도 표시한다. 화면에 많이 보여지는 요소가 무엇인지 알아보기 위해 Intersection Observer API를 사용했다.
Intersection Observer API는 관찰자로서 ancestor element 혹은 document의 viewport와 target element의 intersection의 변화를 비동기적으로 관찰하는 방법을 제공한다.

let options = {
  root: null,
  rootMargin: '0px',
  threshold: 1
}

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#listItem');

observer.observe(target);

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
  });
};

Intersection observer options

• root : target이 보여지는지 아닌지 확인하는 viewport인 element로, target의 ancestor여야만 한다. default는 null로 browser viewport이다.
• rootMargin : root의 margin. default는 0.
• threshold : 0 ~ 1. target이 몇 퍼센트나 보여지면 callback 함수를 부르면 되는가를 결정해준다. 1은 100%로 보일 때, 전부 다 보였을 때. default는 0이라서 조금이라도 보이는 순간 바로 callback함수가 실행된다.

Callback

callback 함수에는 IntersectionObserverEntry를 전부 담은 array와 IntersectionObserver object 그 자체의 reference가 매개변수로 전달된다.

• entry.isIntersecting : intersection의 상태로의 transition이라면 true, 아니면 false가 전달된다. (나타날 때, 사라질 때 true)
• entry.target : target element
• entry.intersectionRatio : 0(안 보임) ~ 1(전부 보임)
• entry.isIntersecting : 보이기 시작하는 상태이면 true, 이제 사라지는 상태이면 false. into a state of intersection(true), out of a state of intersection(false).

Intersection Observer API
Document.elementFromPoint()
Element.closest()