[JavaScript] 무한 스크롤 (Infinite Scroll)

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다.

 

1. Scroll Bar의 위치 찾는법

const onScroll = e => {
    console.dir(e.target.scrollingElement);
}
document.addEventListener("scroll", onScroll);

위와 같은 코드를 사용하여 콘솔창을 확인해보면 

 

console.log

위와 같이 수많은 정보가 나온다.

 

여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다.

그 이유는!!!

무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 

body 영역의 총 길이 = scrollHeight = scrollTop + clientHeight 

위와 같은 공식을 가지기 때문이다!

따라서 scrollTop + clientHeight가 scrollHeight 값 이 될 때 Fetching 작업을 걸어주면 된다.

 

2. 좀 더 효율적인 코드

 

위와 같은 로직을 활용해서 body에 eventListner를 걸어도 무한 스크롤은 가능하다.

document.addEventListner("scroll", onScroll);

하지만!

위와 같은 코드를 body 달아서 할 경우 onScroll에 console.log를 찍어보면 아래 사진과 같이 스크롤이 이동할 때마다 함수를 호출하는 문제?가 발생한다. (굉장히 비효율적)

console 창

이런경우에는 연속으로 발생하는 이벤트에 대해 마지막 한 번만 실행시키는 debounce 함수를 작성하면 훨씬 효율적인 코드가 된다.

export const debounce = (func, delay) => {
  let timeoutId = null;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func.bind(null, ...args ), delay);
  }
}

document.addEventListener("scroll", debounce(onScroll,300));

 

clearTimeout으로 스크롤이 이동할 때에 계속 함수 호출을 지연시키다가 스크롤이 300ms 멈춰있게 되면 함수를 호출하는 식이다.

이렇게 하면 마지막 (scrollHeight === (clientHeight + scrollTop))에 닿았을 때 스크롤이 잠시 멈춰 무한 스크롤링 함수를 한 번만 호출하게 된다.