무한 스크롤

무한 스크롤이란?

센티널 패턴

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Sentinel 관찰하기

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

로드 트리거하기

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

페이지 추적하기

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

중복 로드 방지하기

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

새 항목 추가하기

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

끝에서 중지하기

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

rootMargin이 도움이 되는 이유

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

접근성 참고 사항

전체 흐름

빠른 확인

복습