scroll-snap-stop

scroll-snap-stop

scroll-snap-stop 유틸리티는 스냅 컨테이너에서 다음 항목으로 계속 스크롤하기 전에 요소에서 항상 멈추게 할지, 아니면 스냅 위치를 건너뛸 수 있게 할지를 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

스냅 위치에서 강제로 멈추기 (Forcing snap position stops)

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>

스냅 위치 건너뛰기 (Skipping snap position stops)

snap-normal 유틸리티를 사용하면 스냅 컨테이너가 가능한 스크롤 스냅 위치를 건너뛸 수 있게 허용할 수 있어요:

<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>

반응형 디자인 (Responsive design)

scroll-snap-stop 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="snap-always md:snap-normal ...">
  <!-- ... -->
</div>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.