230530 Intersection Observer 간단한 무한 스크롤

230530 Intersection Observer 간단한 무한 스크롤

Intersection Observer API를 이용한 간단한 무한스크롤 만들기

Intersection Observer 생성하기

callback과 options를 인자로 생성자를 사용해 생성한다.

Intersection Observer는 등록한 요소를 관찰하고 지정한 임계값 이상 화면에 노출되면 callback을 호출한다.

let observer = new IntersectionObserver(callback, options);

callback 함수는 entries와 observer를 받는다.

• options는 관찰하는 요소의 부모 요소 또는 null을 지정하고
• rootMargin은 root 요소로 부터 밖으로 공간을 넓히거나 마이너스 값으로 좁힐 수 있다.
• threshold는 요소가 화면에 얼마나 보여야 callback이 실행되는지를 정하는 백분율로 0 ~ 1 사이의 값이다.

화면이 최하단인지 관찰하고 callback 수행

1. 화면이 최하단인지 알기 위해 마지막 박스를 관찰 시작
2. 마지막 박스가 50% 이상 보이면
3. 새로운 박스를 10개 더 밑에 붙이고
4. 원래 마지막 박스를 관찰 취소하고 새로운 마지막 박스를 다시 관찰
5.  2~4를 반복
6. index가 50이상이면 if문에 의해 다시 관찰을 시작하지 않으므로 관찰 종료

// DOM 조작을 위한 코드
  let index = 0;
  const $main = document.querySelector("#main");
  window.addEventListener("load", onLoadWindow());
  function onLoadWindow() { //초기 로드 시 박스 10개 생성
    addBoxs(10);
  }

  function addBoxs(length) { // 박스를 생성해서 $main에 넣는 함수
    for (let i = index; i < index + length; i++) {
      const box = document.createElement("div");
      box.classList.add("box");
      box.innerText = i;
      $main.appendChild(box);
    }
    index += length;
  }

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.5
  };

  let callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) { // (2) 관찰 중인 박스가 50% 이상 보이면
        observer.unobserve(entry.target); // (3) 해당 박스를 관찰 취소
        addBoxs(10); // (4) 10개 박스를 더 생성하여 $main 마지막에 넣음
        if (index < 50) observer.observe($main.lastChild); // (5) 50개 미만이면 $main의 새로운 마지막 박스를 다시 관찰
      }
    });
  };

  let observer = new IntersectionObserver(callback, options);
  observer.observe($main.lastChild); // (1) $main의 마지막 박스를 관찰