Interactivity
scroll-snap-stop
Utilities for controlling whether you can skip past possible snap positions.
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Examples
Forcing snap position stops
Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:
Scroll in the grid of images to see the expected behavior
<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
Use the snap-normal utility to allow a snap container to skip past possible scroll snap positions:
Scroll in the grid of images to see the expected behavior
<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
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.
Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档
Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布
本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系
Tailwind 商标由 Tailwind Labs Inc. 所有
京ICP备15031610号-8