scroll-snap-align

用于控制元素滚动吸附对齐方式的工具类。

快速参考

类	属性
snap-start	scroll-snap-align: start;
snap-end	scroll-snap-align: end;
snap-center	scroll-snap-align: center;
snap-align-none	scroll-snap-align: none;

示例

吸附到中心

使用 snap-center 工具类，在吸附容器内滚动时将元素吸附到其中心：

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-start 工具类，在吸附容器内滚动时将元素吸附到其起点：

snap point

<div class="snap-x ...">
  <div class="snap-start ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

吸附到终点

使用 snap-end 工具类，在吸附容器内滚动时将元素吸附到其终点：

snap point

<div class="snap-x ...">
  <div class="snap-end ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

响应式设计

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

<div class="snap-center md:snap-start ...">
 <!-- ... -->
</div>

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