AAtomic CSS

scroll-snap-stop

스크롤 시 스냅 포인트를 통과할 수 있는지 여부를 제어합니다. sssa를 적용하면 빠른 스크롤에서도 각 스냅 포인트에 반드시 정지합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
sssnscroll-snap-stop: normal기본값. 스냅 포인트를 건너뛸 수 있음
sssascroll-snap-stop: always각 스냅 포인트에 반드시 정지

클래스별 상세

sssnscroll-snap-stop: normal

기본값입니다. 빠르게 스크롤하면 중간 스냅 포인트를 건너뛸 수 있습니다. 사용자가 자유롭게 스크롤할 수 있도록 할 때 사용합니다.

<!-- Default behavior: snap points can be skipped -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
  <div class="sssn fs0 w100p">Slide 1</div>
  <div class="sssn fs0 w100p">Slide 2</div>
  <div class="sssn fs0 w100p">Slide 3</div>
</div>

sssascroll-snap-stop: always

빠른 스크롤에서도 각 스냅 포인트에 반드시 정지합니다. 캐러셀, 온보딩 슬라이드처럼 사용자가 모든 항목을 반드시 거쳐야 할 때 사용합니다.

<!-- Stop at every slide -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
  <div class="sssa fs0 w100p">Must stop 1</div>
  <div class="sssa fs0 w100p">Must stop 2</div>
  <div class="sssa fs0 w100p">Must stop 3</div>
</div>

주의

sssa는 스냅 자식 요소에 적용해야 합니다. 컨테이너가 아닌 개별 아이템에 추가하세요.

팁 & 주의사항

캐러셀에서의 활용

이미지 캐러셀이나 카드 슬라이더에서 sssa를 적용하면 사용자가 한 번에 하나의 카드만 넘길 수 있어 UX가 향상됩니다.

scroll-behaviorscroll-marginscroll-padding