Lzh on GitHub

scroll-snap-align

用于控制元素滚动捕捉对齐方式的工具。

快速参考

类别样式
snap-startscroll-snap-align: start;
snap-endscroll-snap-align: end;
snap-centerscroll-snap-align: center;
snap-align-nonescroll-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>

响应式设计

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

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

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