AAtomic CSS

scroll-snap-align

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

클래스 목록

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

라이브 데모

아래 컨테이너는 sstxm으로 가로 스냅이 켜져 있습니다. 자식 카드의 정렬 클래스를 바꿔 가며 좌우로 스크롤해 보세요. 카드가 왼쪽·가운데·오른쪽 중 어디에 멈추는지 달라집니다.

1
2
3
4
5
6
7
8

ssas — 카드의 왼쪽 모서리가 컨테이너의 왼쪽 안쪽 모서리에 맞춰집니다.

클래스별 상세

ssanscroll-snap-align: none

해당 요소를 스냅 포인트에서 제외합니다. 기본값이므로 보통은 명시할 필요가 없지만, 한 컨테이너 안에서 표지 슬라이드만 스냅시키고 본문은 자유 스크롤로 두는 식의 혼합 레이아웃에서 유용합니다.

<!-- Mixed list: only some items are snap points -->
<div class="sstym oya h40rem">
  <div class="ssas h20rem">Chapter cover (snaps)</div>
  <div class="ssan p2rem">Body text scrolls freely, no snapping</div>
  <div class="ssas h20rem">Next chapter cover (snaps)</div>
</div>

ssasscroll-snap-align: start

인라인/블록 방향의 시작 모서리에 정렬합니다. 가로 스크롤이면 왼쪽, 세로 스크롤이면 위쪽입니다. 카드 캐러셀과 섹션 스냅의 기본 선택지입니다.

<!-- Carousel: each card lines up with the left edge -->
<div class="sstxm df oxa gap16px">
  <div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 1</div>
  <div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 2</div>
  <div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 3</div>
</div>

ssacscroll-snap-align: center

요소의 중심을 컨테이너 중심에 맞춥니다. 활성 항목을 강조하는 커버플로우형 갤러리나 썸네일 스트립에 어울립니다. 첫/마지막 항목까지 가운데로 오게 하려면 컨테이너 양옆에 여백을 주거나 scroll-padding을 함께 쓰세요.

<!-- Cover flow: the active item sits in the middle -->
<div class="sstxm df oxa gap16px px2rem">
  <div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 1</div>
  <div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 2</div>
  <div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 3</div>
</div>

ssaescroll-snap-align: end

끝 모서리에 정렬합니다. 가로 스크롤이면 오른쪽, 세로 스크롤이면 아래쪽입니다. 최신 항목이 아래에 붙어야 하는 채팅/타임라인 뷰에 적합합니다.

<!-- Chat log: the newest message lands at the bottom edge -->
<div class="sstym oya h40rem df fdc gap12px">
  <div class="ssae p16px bg18181B br8px">Message 1</div>
  <div class="ssae p16px bg18181B br8px">Message 2</div>
  <div class="ssae p16px bg18181B br8px">Message 3</div>
</div>

사용 예시

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

<!-- Start-aligned carousel -->
<div class="sstxm df oxa">
  <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>

<!-- Center-aligned gallery -->
<div class="sstxm df oxa">
  <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>

실전 예시: 스토리 뷰어와 썸네일 스트립

본문은 화면을 꽉 채우는 ssas 슬라이드로, 아래 썸네일 스트립은 활성 썸네일이 가운데 오도록 ssac로 구성한 조합입니다.

<!-- Story viewer: full-bleed slides that always land flush -->
<div class="sstxm obxc swn df oxa h100vh">
  <article v-for="story in stories" class="ssas fs0 w100vw h100vh pr">
    <img :src="story.image" alt="" class="w100p h100p ofc">
    <div class="pa b0 l0 w100p p2rem">
      <h2 class="fs2-4rem fw700 cFFFFFF">Story title</h2>
    </div>
  </article>
</div>

<!-- Thumbnail strip under it: centred active thumb -->
<div class="sstxm df oxa gap8px px50p">
  <button class="ssac fs0 w6rem h6rem br8px bn cp"></button>
  <button class="ssac fs0 w6rem h6rem br8px bn cp"></button>
</div>

주의사항

부모의 scroll-snap-type이 없으면 무시됩니다

scroll-snap-align은 단독으로는 아무 효과가 없습니다. 스크롤 컨테이너에 sstxm·sstym 같은 클래스가 반드시 함께 있어야 합니다.

ssac는 첫 항목과 마지막 항목이 어색할 수 있습니다

중앙 정렬은 항목을 컨테이너 가운데로 끌어오는데, 첫/마지막 항목은 그만큼 스크롤할 여유가 없습니다. 컨테이너 좌우에 패딩을 주거나 앞뒤에 빈 스페이서를 두어 해결합니다.

정렬 기준은 스크롤 축을 따릅니다

start는 항상 왼쪽이 아니라 스크롤 축의 시작을 뜻합니다. 세로 스크롤에서는 위쪽, RTL 가로 스크롤에서는 오른쪽이 시작점이 됩니다.

scroll-snap-typescroll-margin-leftscroll-padding-leftscroll-behavioroverflow