Tailwind CSS - 滚动停止

Tailwind CSS 现代指南：滚动吸附停止

滚动吸附（Scroll Snap）是一项强大的 CSS 特性，用于创建良好控制的滚动体验，非常适合图片轮播图、产品画廊和基于章节的页面。Tailwind 的**滚动吸附停止（Scroll Snap Stop）**工具类控制当用户快速滚动时，浏览器应在每个吸附点停止的严格程度。

滚动吸附停止工具类

这些工具类控制 scroll-snap-stop CSS 属性。它们应用于滚动吸附容器内的子元素。

类名	CSS 属性	行为
`snap-normal`	`scroll-snap-stop: normal;`	默认行为。如果用户滚动速度足够快，浏览器可能会跳过此吸附点。
`snap-always`	`scroll-snap-stop: always;`	强制停止。无论滚动速度如何，浏览器都必须在此吸附点停止。

关键概念：滚动吸附容器

为了使 snap-normal 或 snap-always 生效，它们必须应用于滚动容器的直接子元素。这个容器需要一些基本工具类：

滚动溢出： overflow-x-auto 或 overflow-y-auto。
吸附类型： snap-x 或 snap-y 来定义轴向。
吸附严格性： snap-mandatory（总是吸附）或 snap-proximity（如果接近则吸附）。
子元素吸附对齐： 子元素上的 snap-center、snap-start 或 snap-end 等工具类来定义它们应如何对齐。

示例：使用 `snap-always` 的产品画廊

此示例展示了一个水平产品画廊，其中每个项目都是一个强制停止点。这确保了用户在滚动时能看到每个产品，这对于电子商务网站来说是理想的。

<!-- 假设已有一个标准的 Tailwind CSS 项目设置 -->
<div class="w-full max-w-4xl mx-auto my-10">
  <h3 class="text-2xl font-bold text-center mb-4">特色产品</h3>
  <!-- 滚动吸附容器 -->
  <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth p-4 gap-4 bg-gray-100 rounded-lg">

    <!-- 滚动吸附子元素 -->
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      产品 1
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      产品 2
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      产品 3
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      产品 4
    </div>

  </div>
  <p class="text-center text-gray-500 mt-2">水平滚动。每个产品都是一个保证会停止的吸附点。</p>
</div>

最佳实践与可访问性

最佳实践： 当用户按顺序查看每项内容至关重要时，请使用 snap-always。对于不太重要的“浏览”界面，请使用 snap-normal。
专业提示： 为容器添加 scroll-smooth 工具类，以实现更愉悦、硬件加速的滚动动画。
可访问性 (a11y)： 滚动吸附有时会“困住”用户，特别是那些使用键盘导航的用户。请确保所有吸附的元素都可以被聚焦，并且容器可以被滚出。除非它是用户体验的核心部分（如演示文稿），否则应避免在页面的主要 <body> 上使用滚动吸附。
调试提示： 如果滚动吸附不起作用，请检查以下几点：1) 容器是否是滚动容器（overflow-x/y-auto）？ 2) 它是否具有 snap-x/y 和 snap-mandatory/proximity？ 3) 吸附工具类（snap-center、snap-always）是否应用于容器的直接子元素？ 4) 如果在 flexbox 容器中，子元素是否具有尺寸（w- 或 h-）和 flex-shrink-0？