무한 스크롤 (documnent.body.clientHight)

woolee의 기록보관소·2022년 10월 25일

FE기능구현

FE 기능구현 연습

목록 보기

2/33

랜덤 이미지

pravatar - Direct Image ID

기본 이미지 더미 생성하기

img 요소 생성
img.src에 랜덤 이미지 url 삽입 (Math.random을 활용해 난수 생성)
div 요소에 생성한 img 요소 추가하기

const container = document.querySelector('.container')
const URL = 'https://i.pravatar.cc/500?img='


function getRandNum(){
  return Math.floor(Math.random() * 70) // 0~69
}

function loadImages(numImages = 10){
  let i=0;
  while (i < numImages){
    const img = document.createElement('img')
    img.src = `${URL}${getRandNum()}`
    container.appendChild(img)
    i++
  }
}

loadImages()

스크롤 할 때 맨 끝점 계산하기 (viewport의 밑바닥)

window.innerHeight => 브라우저의 현재 높이 (viewport 높이)
document.body.clientHeight => 웹페이지 body 높이
window.scrollY => 수직으로 스크롤 된 양(높이)

window.scrollY + window.innerHeight 가 document.body.clientHeight보다 커지면 가장 밑바닥을 지나는 지점이다.

window.addEventListener('scroll', () => {
  // console.log(window.scrollY)
  // console.log(window.innerHeight)

  // if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight){
  if (window.scrollY + window.innerHeight >= document.body.clientHeight){
    loadImages()
  }
})

좀 더 정확하게 문서 높이 설정하려면, 브라우저 창 사이즈와 스크롤

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);