인터랙티비티
scroll-snap-align
엘리먼트의 스크롤 스냅 정렬을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
snap-align-none | scroll-snap-align: none; |
예제
중앙으로 스냅하기
스냅 컨테이너 내에서 스크롤할 때 엘리먼트를 중앙으로 스냅하려면 snap-center 유틸리티를 사용하세요:
이미지 그리드에서 스크롤하여 예상 동작을 확인하세요
스냅 포인트
<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-start 유틸리티를 사용하세요:
이미지 그리드에서 스크롤하여 예상 동작을 확인하세요
스냅 포인트
<div class="snap-x ..."> <div class="snap-start ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-06.jpg" /> </div></div>끝으로 스냅하기
스냅 컨테이너 내에서 스크롤할 때 엘리먼트를 끝으로 스냅하려면 snap-end 유틸리티를 사용하세요:
이미지 그리드에서 스크롤하여 예상되는 동작을 확인하세요
snap point
<div class="snap-x ..."> <div class="snap-end ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-06.jpg" /> </div></div>반응형 디자인
접두사 a scroll-snap-align 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
