1. 交互性
  2. scroll-snap-type

交互性

scroll-snap-type

用于控制在捕捉容器中强制执行捕捉点严格程度的实用工具。

类名样式
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;

示例

水平滚动捕捉

使用 snap-x 实用工具在一个元素内启用水平滚动捕捉

在图像网格中滚动以查看预期行为

捕捉点
<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-mandatory 实用工具强制捕捉容器始终停留在捕捉点上

在图像网格中滚动以查看预期行为

捕捉点
<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>

邻近滚动捕捉

使用 snap-proximity 实用工具使捕捉容器停留在邻近的捕捉点上

在图像网格中滚动以查看预期行为

捕捉点
<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>

响应式设计

前缀a scroll-snap-type 实用工具 使用断点变体(如 md:)仅在以下尺寸应用实用工具中等 屏幕尺寸及以上

<div class="snap-none md:snap-x ...">
<!-- ... -->
</div>

变体文档中了解更多关于使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策