오늘 공부한 내용 💻
- 무한 스크롤
어려웠던 내용 🤢
-
무한 스크롤
무한 스크롤이란, 컨텐츠를 페이징하는 기법 중 하나로 아래로 스크롤 하다가 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다.
-
무한 스크롤 구현 방식
- window의 scroll event를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끔 즈음에 다다랐는지 체크해서 처리하는 방식
window.addEventListner('scroll', () => {
console.log((window.innerHeight + window.scrollY) >= document.body.offsetHeight);
}) (현재 화면 높이 + 스크롤된 값) >= 전체 렌더링된 높이
가 참이면 로딩을 하는것 !
- intersection observer 방식
더 공부할 내용 📃
- intersection observer 방식
느낀점 👀
생각해보니 무한 스크롤 ,,,
페이스북, 인스타그램 등등 내가 매일매일 사용하고 있었다 !
배워보고 흥미로워서 무한 스크롤에 대해 이것저것 찾아보니 꽤나 호불호가 갈리는 기법 같았다.
페이지 인덱스가 보여져서 사용자가 선택하게끔 하는 방식과 무한 스크롤의 장단점이 분명하게 갈리는 것이 신기했다.
어플리케이션의 특성에 따라서 적용을 잘 해야하는것 같다! 😁
Studying FrontEnd Development