[VanillaJS] 무한 스크롤 UI 구현하기

❗❗  데브코스 28일차 (09.08)

Vanilla JS Part 2과정이 시작됐다.
Part2 과정은 조금 더 프론트엔드 과제 테스트에 중점을 두어,
과제 테스트에서 많이 사용하는 유형을 토대로 강의가 이루어졌다.

오늘 다룰 주제는 "무한 스크롤 UI" 구현하기 이다.

 

유튜브나 페이스북에서 스크롤하면 자동으로 컨텐츠를 불러오는 것을 종종 볼 수 있는데 

어떤 원리인지 평소 궁금했는데 이번 기회를 통해 학습할 수 있어서 매우 좋았다.

 

❓무한 스크롤이란❓

컨테츠를 페이징 하는 기법 중 하나로,

아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식.

주로 모바일 환경에서 자주 사용됨.

ex) facebook, twitter, instagram 등에서 사용되는 기법이다.

 

✅무한 스크롤 구현 방식 두 가지

1. window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다

화면 전체의 height와 스크롤 위치를 통해 컨텐츠 끝에 다다랐는지 체크해서 처리하는 방식

  window.addEventListener("scroll", () => {
    // 현재높이 + 스크롤된 높이 >= 전체 높이 =  화면 끝에 닿았는지 체크
    //isScrollended 값이 true이면 화면 끝까지 스크롤한 상태이다.
    const isScrollEnded =
      window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight;
      
      if(isScrollEnded){
      	api 요청~~
      }
 }

2. intersection observer 방식 : 지정한 dom객체가 화면에 보이는지 여부에 따라 체크해서 처리하는 방식

이 부분은 코드로 예시 보여주기엔 어려움이 있어 "Intersection Observer API" 키워드로 검색해서 학습하시는 것을 추천 드립니다.

 

3. button 방식 : 더보기 버튼을 만들어서 클릭시 api 요청 진행 (제일 간단하다.)

 

📖 학습한 내용

• VanillaJS
  • 무한 스크롤 UI 구현하기