scroll-snap-type
Các tiện ích để kiểm soát mức độ nghiêm ngặt của các điểm snap trong một snap container.
| 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; |
Ví dụ
Scroll snapping theo chiều ngang
Sử dụng tiện ích snap-x để kích hoạt scroll snapping theo chiều ngang bên trong một phần tử:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
<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>Để scroll snapping hoạt động, bạn cũng cần thiết lập căn chỉnh scroll snap trên các phần tử con.
Scroll snapping bắt buộc
Sử dụng tiện ích snap-mandatory để buộc một snap container luôn dừng lại tại một điểm snap:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
<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>Scroll snapping lân cận
Sử dụng tiện ích snap-proximity để làm cho một snap container dừng lại tại các điểm snap nằm gần đó:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
<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>Thiết kế responsive
Prefix a scroll-snap-type utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-none md:snap-x ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.