Lzh on GitHub

scroll-snap-type

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

快速参考

类别样式
snap-nonescroll-snap-type: none;
snap-xscroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-yscroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-bothscroll-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 
<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 
<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 
<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>

响应式设计

在 scroll-snap-type 工具前加上 md: 等断点变体，只在中等屏幕尺寸及以上应用该工具：

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

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