scroll-snap-stop

用于控制是否可以跳过可能的吸附位置的工具类。

快速参考

类	属性
snap-normal	scroll-snap-stop: normal;
snap-always	scroll-snap-stop: always;

示例

强制停在吸附位置

将 snap-always 工具类与 snap-mandatory 工具类一起使用，强制吸附容器始终先停在某个元素上，用户才能继续滚动到下一项：

snap point

<!-- [!code classes:snap-x,snap-mandatory,snap-always] -->
<div class="snap-x snap-mandatory ...">
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

跳过吸附位置

使用 snap-normal 工具类，允许吸附容器跳过可能的滚动吸附位置：

snap point

<!-- [!code classes:snap-x,snap-normal] -->
<div class="snap-x ...">
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

响应式设计

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

<div class="snap-always md:snap-normal ...">
 <!-- ... -->
</div>

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