AAtomic CSS

scroll-snap-stop

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

클래스 목록

클래스CSS설명
sssnscroll-snap-stop: normal기본값. 스냅 포인트를 건너뛸 수 있음
sssascroll-snap-stop: always각 스냅 포인트에 반드시 정지

클래스별 상세

sssnscroll-snap-stop: normal

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

<!-- 스냅 포인트를 건너뛸 수 있는 기본 동작 -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
  <div class="sssn fs0 w100p">슬라이드 1</div>
  <div class="sssn fs0 w100p">슬라이드 2</div>
  <div class="sssn fs0 w100p">슬라이드 3</div>
</div>

sssascroll-snap-stop: always

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

<!-- 모든 슬라이드에 반드시 정지 -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
  <div class="sssa fs0 w100p">반드시 멈춤 1</div>
  <div class="sssa fs0 w100p">반드시 멈춤 2</div>
  <div class="sssa fs0 w100p">반드시 멈춤 3</div>
</div>

주의

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

팁 & 주의사항

캐러셀에서의 활용

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

scroll-behaviorscroll-marginscroll-padding