[Javascript] 무한 스크롤 구현하기

[Javascript] 무한 스크롤 구현하기

무한 스크롤 : 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험 방식이다.

한 페이지 아래로 스크롤하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤해서 볼 수 있다.

무한 스크롤의 장점

- 사용자 참여 및 콘텐츠 탐색이 쉽다.

- 무한 스크롤이 클릭하는 것 보다 더 나은 사용자 경험을 제공한다.

- 터치 스크린(모바일)일 때 더 유용하게 적용된다.

무한 스크롤의 단점

- 페이지 성능이 느려진다.

- 특정 항목 검색 및 원래 위치로 되돌아오기 힘들다.

- 스크롤 막대가 실제 데이터양을 반영하지 못한다.

- 푸터를 찾기 어려워진다.

바닐라 자바스크립트로 무한 스크롤 구현하기

: 스크롤 이벤트, 인터섹션 옵저버를 이용해보자 !!!

각각의 장단점을 살펴보자.

스크롤 이벤트

: 스크롤 이벤트를 걸어서 원하는 동작을 시키면 이벤트에 걸어두었던 모든 작업들이 실행된다.

요소가 많아지면 브라우저에 과부하가 생긴다.

intersection obsever

: 스크롤 되는 순간 순간마다 이벤트를 확인하는 것이 아닌 내가 지켜보고자 하는 대상을 등록시켜 그 대상이 상위 요소 혹은 최상위 도큐먼트인 뷰포트와의 교차영역에 대한 변화를 감지할 수 있도록 하는 방법이다.

문법 설명

- 인터섹션 옵저버를 생성한다.

const io = new IntersectionObserver(callback, options);

- 지켜볼 요소를 매개변수에 넣어 호출한다.

io.observe('요소')

- 콜백함수 내에서 주어진 매개변수로 하고자 하는 일을 구현한다.

- 스크롤이 바닥에 닿게 되면 20개의 아이템을 불러온다.

- 20개의 아이템을 불러오는 시간 동안 로딩을 띄운다.

- 해당 아이템의 상세보기 창에서 뒤로가기를 누르면 기존의 스크롤이 유지된다.

- 아이템이 다 불러와지면 무한 스크롤은 멈추게 된다.

다양한 페이징 기능들

- 페이지네이션

- 무한스크롤

- 더보기 버튼

출처

https://velog.io/@dev-tinkerbell/%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%EB%B0%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

https://code-study.tistory.com/22

from http://moretz0921.tistory.com/393 by ccl(A) rewrite - 2021-12-28 16:27:33