scroll-snap-align
Các tiện ích để kiểm soát căn chỉnh scroll snap của một phần tử.
| 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; |
Ví dụ
Snap vào giữa
Sử dụng tiện ích snap-center để snap một phần tử vào giữa của nó khi được cuộn bên trong một snap container:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
snap point
<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 vào đầu
Sử dụng tiện ích snap-start để snap một phần tử vào đầu của nó khi được cuộn bên trong một snap container:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
snap point
<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 vào cuối
Sử dụng tiện ích snap-end để snap một phần tử vào cuối của nó khi được cuộn bên trong một snap container:
Cuộn trong lưới hình ảnh để xem hành vi mong đợi
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>Thiết kế responsive
Prefix a scroll-snap-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.