무한 스크롤 구현 시 스크롤이 생기지 않았다면?

면접에서 무한 스크롤 구현 시 발생할 수 있는 문제 상황에 대해 질문을 받았다.

"사용자 환경에 따라 해상도가 달라질 수 있는데, 어떤 경우에는 콘텐츠가 화면에 다 들어와서
스크롤 자체가 발생하지 않을 수 있다. 이런 경우 무한 스크롤은 어떻게 구현해야되나요?"

나는 당시 이런 케이스를 깊이 고려해본 적이 없었고, 급한 마음에 “세로 마진을 크게 주어 강제로 스크롤을 발생시킬 것 같습니다”라고 단순하게 답변했다.

면접 이후 해당 질문의 정답이 너무 궁금해서 해결 방법에 대해 검색해보았다.

검색을 통해 아래와 같은 해결 방법을 찾아냈다.

문제 상황

콘텐츠 양이 적거나 해상도가 너무 큰 경우 : 한 화면에 모든 데이터가 다 표시되어 스크롤 X
이때 IntersectionObserver로 바닥 감지를 해도, 감지할 스크롤 이벤트 자체가 없어 무한 스크롤이 동작 X

해결 방법

초기 로딩에서 데이터 양 보정

첫 렌더링 시 한번만 스크롤이 생기지 않는 조건을 체크해서 fetchNextPage()를 여러 번 호출

useEffect(() => {
  if (data && !hasNextPage) return;
  const checkScroll = () => {
    if (document.documentElement.scrollHeight <= window.innerHeight) {
      fetchNextPage();
    }
  };
  checkScroll();
}, [data, hasNextPage, fetchNextPage]);

sentinel 위치 보정
- sentinel(감시용 div)을 항상 화면 안에 들어오도록 고정하가나 rootMargin 값을 넉넉히 줘서 스크롤이 없더라도 관찰 이벤트가 발생하도록 만든다

Fallback: 더보기 버튼 제공
- 무한 스크롤 UX가 좋지만, 예외적으로 스크롤이 생기지 않을 수 있다는 점을 대비해 더보기 버튼을 함께 제공

위와 같이 3가지 방법을 찾아냈다.

개인적인 생각으로 나는 1번의 해결 방법이 가장 안전하고 직관적이라고 생각해 해당 문제를 겪게 된다면 1번 방식으로 해결할 것 같다.