Scroll Snap Stop 滚动捕捉停止
控制您是否可以跳过可能的捕捉位置的实用程序。
| Class | Properties |
|---|
基本用法
强制快照位置停止
使用 snap-always 实用程序与 snap-mandatory 实用程序一起，强制快照容器始终在用户可以继续滚动到下一个项目之前停在元素上。
👆 在图像网格中滚动以查看预期行为
snap point
html
<div class="snap-x snap-mandatory ...">
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1604999565976.jpg" />
</div>
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1540206351.jpg" />
</div>
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1622890806166.jpg" />
</div>
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1590523277543.jpg" />
</div>
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1575424909138.jpg" />
</div>
<div class="snap-always snap-center ...">
<img src="/images/tailwindcss/photo-1559333086.jpg" />
</div>
</div>跳过快照位置停止
使用 snap-normal 实用程序允许快照容器跳过可能的滚动快照位置。
👆 在图像网格中滚动以查看预期行为
snap point
html
<div class="snap-x ...">
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1604999565976.jpg" />
</div>
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1540206351.jpg" />
</div>
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1622890806166.jpg" />
</div>
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1590523277543.jpg" />
</div>
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1575424909138.jpg" />
</div>
<div class="snap-normal snap-center ...">
<img src="/images/tailwindcss/photo-1559333086.jpg" />
</div>
</div>有条件地应用
悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:snap-normal 只在悬停时应用 snap-normal 实用程序。
html
<div class="snap-always hover:snap-normal">
<!-- ... -->
</div>有关所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、偏好减少动作等媒体查询进行定位。例如，使用 md:snap-normal 仅在中等屏幕尺寸及以上应用 snap-normal 实用程序。
html
<div class="snap-always md:snap-normal">
<!-- ... -->
</div>