무한 스크롤 이해하기

 

우리에겐 html 컨테이너가 있다.

이 컨테이너에 수직 스크롤(overflow-y) 을 구현하고 싶고 스크롤을 끝까지 내렸을 때

더 많은 데이터를 불러온다든지 어떤 임의의 함수를 트리거 하고 싶다고 가정해보자.

<div id="id명">
...
...
...
<div/>

 

커스텀 css나 사용하는 프론트 라이브러리의 내장 클래스로 해당 div에 overflow를 줬다면

이제 끝까지 내렸을 때 동작하게끔 구현해야 한다.

 

동작이기 때문에 기본적으로 JS 단에서 해야하고

native 대신 jQuery를 통해 간결하게 구현한 방법은 다음과 같다.

$('#div의 id명').on('scroll', function () {
    const scrollTop = $(this).scrollTop();
    const clientHeight = $(this).height();
    const scrollHeight = $(this).prop('scrollHeight');
    if (scrollTop + clientHeight >= scrollHeight) {
		트리거하고 싶은 함수()
    }
});

 

하나하나 살펴보자.

 

먼저 scoll이라는 동작을 할 때 마다 안의 내용이 동작하도록 설정해줬고

동적으로 위치를 계속 변수에 담아주게 된다.

 

 

scrollTop 은 얼마나 많이 내려왔는지를 나타내고

clientHeight는 사용자에게 지금 보여지는 화면의 높이 = div의 높이이고

scrollHeight는 $(this)의 전체 높이니까 스크롤 쭉 내렸을 때의 높이이다.

 

쉽게 그림을 통해 설명하자면 

 

설명 쉽게 하려고 직접 그렸다..ㄷ

 

scrollHeight가 1000px이라는 가정하에

꼭대기 기준으로 스크롤 좀 내려서 500px만큼 내려왔다면

scrollTop은 500px이 될 거고 div의 height는 500px이니

 

얼추 다 내려왔다고 볼 수 있는것이다.

 

이게 완벽히 같지 않을 수 있는데 그 이유는

워낙 다른 css와 프론트 라이브러리가 중첩 적용되어 있어서

정확하게 일치하지 않을 수 있다.

 

아무튼 아래 조건으로 트리거가 되지 않는다면 로그를 찍어보고

높이를 조정해서 항상 작동하도록 만들면 된다.

 

끝까지 내려도 scrollTop과 clientHeight 합친 값이 scrollHeight 값보다 살짝 적을 때 아래처럼 50을 늘려볼 수 있다.

if (scrollTop + clientHeight + 50 >= scrollHeight) {
		트리거하고 싶은 함수()
    }

  

이후 trigger 하고 싶은 함수가 일반적으로 무한스크롤을 사용하고자 하는 목적인 더 많은 데이터를 load하기 위해서라면

백엔드에서 pagination을 구현해놓고 트리거하고 싶은 함수에서 page를 증가시켜줘서 이후의 값을 불러오도록 하고

비동기로 fetch해온 값을 기존의 값에 append, 즉, 덧붙이면 되는 원리이다.