scroll-snap-stop
Các utility để kiểm soát việc bạn có thể bỏ qua các vị trí snap có thể hay không.
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Ví dụ
Buộc dừng tại vị trí snap
Sử dụng utility snap-always cùng với utility snap-mandatory để buộc snap container luôn dừng tại một phần tử trước khi người dùng có thể tiếp tục cuộn đến item tiếp theo:
Scroll in the grid of images to see the expected behavior
snap point
<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>Bỏ qua dừng tại vị trí snap
Sử dụng utility snap-normal để cho phép snap container bỏ qua các vị trí scroll snap có thể:
Scroll in the grid of images to see the expected behavior
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>Thiết kế phản hồi
Prefix a scroll-snap-stop utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.