AAtomic CSS

scroll-snap-align

스크롤 스냅 시 아이템이 정렬되는 위치를 지정합니다. ssas는 캐러셀 아이템이 시작점에 스냅되도록 합니다.

클래스 목록

클래스CSS설명
ssanscroll-snap-align: none스냅 정렬 없음
ssasscroll-snap-align: start시작점에 스냅
ssacscroll-snap-align: center중앙에 스냅
ssaescroll-snap-align: end끝점에 스냅

사용 예시

scroll-snap-align은 스크롤 컨테이너의 자식 요소에 적용합니다. 부모에는 scroll-snap-type이 필요합니다.

<!-- 시작점 정렬 캐러셀 -->
<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="df sstxm oh">
  <div class="fs0 w80p ssac">Photo 1</div>
  <div class="fs0 w80p ssac">Photo 2</div>
  <div class="fs0 w80p ssac">Photo 3</div>
</div>
scroll-snap-typeoverflow