Infinite Scroll

Intersection Observer API는 타겟의 부모엘리먼트 혹은 viewport와 타겟엘리먼트의 교차에서의 변화를 비동기적으로 감지하는 방법을 제공한다.

• root:<element || veiwport> : 타겟의 가장 가까운 스크롤 가능한 상위엘리먼트 혹은 디폴트로 viewport
• rootMargin:<string> : root의 주변 margin으로 css처럼 "top, right, bottom, left" 으로 표기가능
• threshold:<number | array> : 타겟의 visibility percentage로써 observer가 언제 트리거되는지를 가리키는 지점이다. 디폴트는 0 이고 단 한개의 pixel이라도 보이면 트리거한다. 이고 1은 전체 모든 타겟의 pixel이 보일때 트리거한다는 의미.

// simple example

let boxElement;
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: 0
  };
  // observer 생성
  //// handleIntersect: 타겟과 루트가 교차시 핸들러
  //// options: observer 옵션
  observer = new IntersectionObserver(handleIntersect, options);
  // observer 타겟 등록
  observer.observe(boxElement);
}
window.addEventListener("load", (event) => {
  boxElement = document.querySelector("#box");

  createObserver();
}, false);

observer를 생성하

참고링크

• MDN Intersection observer
• intersection observer의 대한 자세한 한글 설명