모바일을 위한 새로운 페이지네이션

가로스크롤(제스처)을 이용한 리디자인

이 상황에서 대략 50페이지를 선택하고 싶으면, 대여섯 번의 쓸데없는 페이지를 거쳐야 한다
페이지 넘버가 높아지면 폭도 늘어나고 다음줄로 넘어갈 때도 있다

스크롤링 페이지네이션

좌우 스크롤하여 원하는 페이지를 한 번에 갈 수있다
중앙은 스크롤 영역이므로, 모든 화면폭에 따라 넘치지 않는다

최초 코딩

무식하게 5천개의 DOM이 랜더링되어 있다

개선된 코딩

딱 스크롤되는 영역만 표시하도록 하여 최소한의 DOM만 유지한다
Virtual Scroll 고정폭 특성상 총 페이지가 커질수록 한 자릿수의 간격은 낭비된다.

더 개선된 코딩

소스 및 스타일

간략한 버전
기본 버전 : https://codepen.io/zidell/pen/OJVbdRK
부트스트랩4 버전 : https://codepen.io/zidell/pen/ZEGeaEJ
시멘틱UI 버전 : https://codepen.io/zidell/pen/QWbpOJO

마무리

약간의 기술을 이용하여, 편리한 서비스와 기능을 만드는데 관심이 많음

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store