scroll-snap

카드가 멈추는 스냅 캐러셀

CSS 몇 줄(scroll-snap-type / scroll-snap-align)이면 라이브러리 없이도 스크롤이 카드에 자석처럼 달라붙어요. 터치/트랙패드 관성은 덤이에요.

scroll-snap-type

항상 한 칸에 강제로 정렬돼요.

scroll-snap-align

카드의 가운데가 영역 중앙에 와요.

  • 01여행 컬렉션
  • 02신상 스니커즈
  • 03오늘의 추천
  • 04한정 에디션
  • 05베스트 셀러

트랙을 직접 드래그하거나 트랙패드/터치로 좌우로 밀어 보세요. 손을 떼는 순간 가장 가까운 카드에 달라붙어요. mandatory와 proximity, start와 center를 번갈아 바꾸면 멈추는 느낌이 달라집니다.