인터랙티비티
scroll-snap-stop
스크롤 중 가능한 스냅 위치를 건너뛸 수 있는지 여부를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
예제
스냅 위치 강제 정지
snap-always 유틸리티를 snap-mandatory 유틸리티와 함께 사용하면, 사용자가 다음 항목으로 스크롤하기 전에 항상 특정 엘리먼트에서 정지하도록 스냅 컨테이너를 강제할 수 있습니다.
이미지 그리드에서 스크롤하여 예상 동작을 확인하세요
스냅 포인트
<div class="snap-x snap-mandatory ..."> <div class="snap-center snap-always ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-06.jpg" /> </div></div>스냅 위치 건너뛰기
snap-normal 유틸리티를 사용하면 스냅 컨테이너가 가능한 스크롤 스냅 위치를 건너뛸 수 있습니다:
이미지 그리드에서 스크롤하여 예상 동작을 확인하세요
snap point
<div class="snap-x ..."> <div class="snap-center snap-normal ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-06.jpg" /> </div></div>반응형 디자인
접두사 a scroll-snap-stop 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
