Infinite Scroll

Question

1. 최초에는 20개의 목록을 불러온다.

2. 스크롤을 최하단으로 이동시 'loading' 상태 표시가 나타나며, 이후의 20개 목록을 더 가져온다.

3. 로딩 완료시 'loading'표시가 사라지며, 가져온 목록이 하단에 추가된다. (무한 반복)

 

Solution

const loadMore = async () => {
  const target = page ? fetchMoreTrigger : app;
  target.classList.add("loading");
  await renderList(page++);
  target.classList.remove("loading");
};

const onScroll = async e => {
  const {scrollTop, scrollHeight, clientHeight} = e.target.scrollingElement;
  if(scrollHeight - scrollTop === clientHeight) {
    const target = page ? fetchMoreTrigger : app;
    target.classList.add("loading");
    await renderList(page++);
    target.classList.remove("loading");
  }
};

 

Issue

1. 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement 프로퍼티가 있는데 이것을 통해 현재 스크롤 상태와 관련된    정보를 얻을 수 있다.    해당 scrollingElement 내에 다음과 같은 3가지 프로퍼티들을 디스트럭쳐링 할당한다.

• clientHeight: 웹 브라우저 창(내용이 보여지는 영역)의 높이
• scrollTop: 현재 스크롤된 부분의 맨 위의 높이(=현재 스크롤의 위치)
• scrollHeight: 문서의 총 높이(=스크롤 대상의 총 높이)

2. '(전체 스크롤 영역) - (현재 스크롤의 위치)'의 값이 (현재 스크롤 된 상태에서의 보여지는 영역)과 같다면 더 이상 스크롤을

    할 공간이 없다는 의미이며 이 식을 조건문 내에 사용한다.

 

3. 초기 상태와 이후 업데이트 될 때의 페이지는 별도로 구성해야 하기 때문에 삼항연산자를 통해 조건에 맞게 taget 변수를 

    각기 다르게 할당해 준다. (초기 page 변수 값은 0이기 때문에 false)

 

Refactoring

const loadMore = async () => {
  const target = page ? fetchMoreTrigger : app;
  target.classList.add("loading");
  await renderList(page++);
  target.classList.remove("loading");
};

const onScroll = e => {
  const {scrollTop, scrollHeight, clientHeight} = e.target.scrollingElement;
  if(scrollHeight - scrollTop === clientHeight) {
    loadMore();
  }
};