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;

示例(Examples)

¥Examples

水平滚动捕捉(Horizontal scroll snapping)

¥Horizontal scroll snapping

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

¥Use the snap-x utility to enable horizontal scroll snapping within an element:

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

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>

要使滚动捕捉功能正常工作,你还需要在子元素上设置 滚动捕捉对齐

¥For scroll snapping to work, you need to also set the scroll snap alignment on the children.

强制滚动捕捉(Mandatory scroll snapping)

¥Mandatory scroll snapping

使用 snap-mandatory 工具强制捕捉容器始终停留在捕捉点上:

¥Use the snap-mandatory utility to force a snap container to always come to rest on a snap point:

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

snap point
<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>

接近滚动捕捉(Proximity scroll snapping)

¥Proximity scroll snapping

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

¥Use the snap-proximity utility to make a snap container come to rest on snap points that are close in proximity:

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

snap point
<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>

响应式设计(Responsive design)

¥Responsive design

scroll-snap-type 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号