scroll-snap-type
Enables scroll snapping. sstxm is for horizontal carousels, and sstym is for vertical page snapping.
Class List
| Class | CSS | Description |
|---|---|---|
sstn | scroll-snap-type: none | Disable scroll snapping |
sstxm | scroll-snap-type: x mandatory | Horizontal mandatory snap |
sstym | scroll-snap-type: y mandatory | Vertical mandatory snap |
sstbm | scroll-snap-type: both mandatory | Both-axis mandatory snap |
sstxp | scroll-snap-type: x proximity | Horizontal proximity snap |
sstyp | scroll-snap-type: y proximity | Vertical proximity snap |
sstbp | scroll-snap-type: both proximity | Both-axis proximity snap |
Usage Examples
scroll-snap-type is applied to the scroll container, used together with scroll-snap-align on child elements.
<!-- Horizontal carousel -->
<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>
<!-- Vertical page snap -->
<div class="sstym oh h100vh">
<section class="h100vh ssas">Section 1</section>
<section class="h100vh ssas">Section 2</section>
</div>mandatory vs proximity
| Type | Behavior |
|---|---|
| mandatory | 스크롤이 끝나면 반드시 스냅 포인트에 정렬됩니다 |
| proximity | 스냅 포인트 근처일 때만 정렬됩니다 |