[Vue3] 무한스크롤 구현하기 (feat.모바일환경)

프로젝트 진행 중 방대한 양의 데이터를 한페이지에 표시하기 위해 페이지네이션과 무한스크롤중 하나를 선택했어야 했는데, 해당 프로젝트에서는 모바일 친화적인 UI이기 때문에 페이지네이션보단 무한스크롤을 이용하는게 더 좋다고 판단하여 무한스크롤을 통해 개발을 진행하였다.

 

              <div
                @scroll="InfiniteScroll"
              ></div>

 

 

무한스크롤을 적용하고싶은 div에 @scroll을 통해 해당 div가 스크롤 될 때 마다 이벤트가 실행되게 한다

 

 

InfiniteScroll(e) {
  const { scrollHeight, scrollTop, clientHeight } = e.target;
  if (scrollTop + clientHeight === scrollHeight) {
    this.RequestAPI(this.data);
  }
}

해당 div의 scrollHeight ( 전체 div의 높이 ), scrollTop ( 현재 스크롤의 위치 ), clientHeight ( 현재 보이는 화면의 높이) 를 정의한다.

 

이벤트를 실행할 때 마다 ( 현재 스크롤의 위치 + 현재 보이는 화면의 높이 )가 ( 전체 div의 높이 )와 같은지 확인 한 후 만약같다면 추가적인 api요청을 통해 화면에 뿌려주게 했다.

 

 

 

 

하지만, 개발자환경에서는 정상적으로 동작하였으나 정작 모바일로 보았을 때 추가 api요청이 요청되지 않았다.

처음엔 모바일환경에서는 @scroll이 실행되지 않는 줄 알았으나 안드로이드 adb를 통해 모바일로 개발자환경을 확인한 결과 모바일에서는 스크롤을 전부 내려도 scrollHeight의 높이가 scrollTop + clientHeight의 차이가 대략 0.9정도의 차이가 나는걸 확인했고, 조건을 약간 수정하여서 정상적인 동작이 가능하게 하였다.