infinite scroll
-
[React] Infinite Scroll을 구현하는 2가지 방법Front-End(Web)/React - 프레임워크(React, Next) 2022. 7. 3. 18:19
🧐 서론 최근, 이직을 하게 되면서 많은 과제를 수행했었고, 처음 혹은 새로 구현하는 다양한 경험치들을 쌓을 수 있었다! 그 중에 하나가 기술할 Infinite Scroll(무한 스크롤) 로, 앱에서는 특히 이 기법을 통해 리스트 데이터를 추가하는 경우가 많다. 이전에 개인 프로젝트를 하면서 무한 스크롤을 구현했었고, 당시 window 객체의 스크롤값을 비교하는 보편적인 방법으로 구현했었다. (링크) [Javascript] Infinite Scroll (Height 속성) 🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, abangpa1ace.tistory.co..
-
[Javascript] Infinite Scroll (Height 속성)Front-End(Web)/Javascript 2021. 3. 7. 04:51
🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, 원본 사이트 영상) 이를 구현하기 위해서, documentElement의 높이값 속성들을 통해 조건을 적용해야했고, 이를 간단히 정리하고 넘어가고자 글을 썼다. 📒 scrollHeight / clientHeight / offsetHeight - document.documentElement 위 세 가지 Height 속성값은 우선, document.documentElement 에서 가져올 수 있는 필드들이다. documentElement는 모든 비어있지 않은 HTML 문서에서, 항상 요소를 가르킨다. (모든 비어있지..