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 工具类，在元素内启用水平滚动吸附：

snap point

<!-- [!code classes:snap-x,snap-center] -->
<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 工具类，强制吸附容器始终停在某个吸附点上：

snap point

<!-- [!code classes: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 工具类，让吸附容器在邻近的吸附点上停下：

snap point

<!-- [!code classes: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>

响应式设计

使用 md: 等断点变体为 scroll-snap-type 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

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

在 变体文档 中了解如何使用变体。