인피니티 스크롤 (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() // 스크롤이 가장 아래쪽에 도달한 경우 추가 데이터 로드
}
})
728x90