무한 스크롤이란

페이지네이션을 구현한 적이 있는데 모바일에서는 버튼을 누르는것은 불편하다 이때 사용하는게 무한스크롤
사용자가 스크롤링 하다가 미리 로드된 콘텐츠를 다 확인하면 다음 목록을 또 로드해서 별도의 인터렉션 없이 목록을 계속 불러오는 방식

방식

scrollHeight - clientHeight - scrollTop 이 미리 정해높은 offset 미만 일 때 스크롤이 최하단에 왔다고 판단해서 다음 페이지를 가져오고 기존 항목들에 덧붙여(append) 주면 됩니다.

스크롤이 최하단에 왔는지 판단하기

Element.scrollHeight

엘리먼트의 총 높이. 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함.

Element.clientHeight

엘리먼트의 내부 높이 (padding 포함, scroll bar 높이, margin, border 미포함)

Element.offsetHeight

엘리먼트의 내부 높이 (padding 포함, scroll bar 높이, margin, border 포함)

Element.scrollTop

스크롤 바의 Top 부분이 화면에 내려온 위치

한계

스크롤을 움직일 때마다 이벤트가 발생하기 때문에 성능 문제가 야기될 수 있습니다.
이를 해결하기 위해 보통 스크롤 이벤트에 쓰로틀링(throttling) 을 적용하여 이벤트를 제한합니다.

Debounce vs Throttling

debounce

이벤트를 그룹핑해서 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술. 연달아서 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것

throttling

이벤트를 일정한 주기마다 발생하는 기술. 마지막 함수가 호출된 후 일정 시간이 지나기 전엔 다시 호출되지 않도록 하는