인터랙티비티
scroll-snap-type
스냅 컨테이너 내에서 스냅 포인트가 얼마나 엄격하게 적용되는지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness); |
snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness); |
snap-mandatory | --tw-scroll-snap-strictness: mandatory; |
snap-proximity | --tw-scroll-snap-strictness: proximity; |
예제
가로 스크롤 스냅
snap-x 유틸리티를 사용해 엘리먼트 내에서 가로 스크롤 스냅을 활성화할 수 있습니다.
이미지 그리드에서 스크롤을 해보면 예상되는 동작을 확인할 수 있습니다.
스냅 포인트
<div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>스크롤 스냅이 동작하려면 자식 엘리먼트에 스크롤 스냅 정렬도 설정해야 합니다.
강제 스크롤 스냅
snap-mandatory 유틸리티를 사용하면 스냅 컨테이너가 항상 스냅 포인트에 정지하도록 강제할 수 있습니다.
이미지 그리드에서 스크롤을 해보면 예상되는 동작을 확인할 수 있습니다
스냅 포인트
<div class="snap-x snap-mandatory ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>근접 스크롤 스냅
snap-proximity 유틸리티를 사용하면 스냅 컨테이너가 근처의 스냅 포인트에 멈추게 할 수 있습니다.
이미지 그리드에서 스크롤을 해보면 예상되는 동작을 확인할 수 있습니다
snap point
<div class="snap-x snap-proximity ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div></div>반응형 디자인
접두사 a scroll-snap-type 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="snap-none md:snap-x ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
