AAtomic CSS

scroll-snap-type

스크롤 스냅을 활성화합니다. sstxm은 수평 캐러셀에, sstym은 수직 페이지 스냅에 사용합니다.

클래스 목록

클래스CSS설명
sstnscroll-snap-type: none스크롤 스냅 비활성화
sstxmscroll-snap-type: x mandatory수평 필수 스냅
sstymscroll-snap-type: y mandatory수직 필수 스냅
sstbmscroll-snap-type: both mandatory양방향 필수 스냅
sstxpscroll-snap-type: x proximity수평 근접 스냅
sstypscroll-snap-type: y proximity수직 근접 스냅
sstbpscroll-snap-type: both proximity양방향 근접 스냅

사용 예시

scroll-snap-type은 스크롤 컨테이너에 적용하며, 자식 요소에 scroll-snap-align을 함께 사용합니다.

<!-- 수평 캐러셀 -->
<div class="df sstxm oh">
  <div class="fs0 w100p ssas">Slide 1</div>
  <div class="fs0 w100p ssas">Slide 2</div>
  <div class="fs0 w100p ssas">Slide 3</div>
</div>

<!-- 수직 페이지 스냅 -->
<div class="sstym oh h100vh">
  <section class="h100vh ssas">Section 1</section>
  <section class="h100vh ssas">Section 2</section>
</div>

mandatory vs proximity

타입동작
mandatory스크롤이 끝나면 반드시 스냅 포인트에 정렬됩니다
proximity스냅 포인트 근처일 때만 정렬됩니다
scroll-snap-alignoverflow