zero-base/ Infinite Scroll(인피니티 스크롤) 기법

인피니티 스크롤 (infinite scroll)

인피니티 스크롤은 웹사이트나 앱에서 사용자가 스크롤을 할 때

새로운 콘텐츠가 계속해서 로딩되는 방식

 

fetch API 사용하여 인피니티 스크롤 구현하기

<div id="data-container"></div>
<div id="loading-message" style="display: none">로딩중...</div>

const dataContainer = document.getElementById('data-container')
const loadingMessage = document.getElementById('loading-message')
let loading = false
let page = 1

function loadData() {
  if (loading) return
  loading = true
  loadingMessage.style.display = 'block'

  // fetch API를 사용하여 서버로부터 데이터를 로드
  fetch(`/api/data?page=${page}`)
    .then((response) => response.text())
    .then((html) => {
      // 로드된 데이터를 컨테이너에 추가
      dataContainer.insertAdjacentHTML('beforeend', html)
      loading = false
      loadingMessage.style.display = 'none'
      page++
    })
    .catch((error) => {
      console.error(error)
      loading = false
      loadingMessage.style.display = 'none'
    })
}

// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    loadData() // 스크롤이 가장 아래쪽에 도달한 경우 추가 데이터 로드
  }
})