Tailwind CSS - 滚动吸附类型

Tailwind CSS 现代指南：滚动吸附

滚动吸附（Scroll Snap）工具类允许你控制滚动容器的吸附行为，创造出愉悦的用户体验，例如图片轮播图、基于章节的网站和产品画廊。它确保当用户停止滚动时，视口会“吸附”到预定义的点。

核心概念：容器、严格性与对齐

实现滚动吸附包括两部分：设置滚动容器和定义子元素上的吸附点。

1. 滚动容器工具类

这些类应用于父级滚动元素。

类名	CSS 属性	描述
snap-none	scroll-snap-type: none;	完全禁用滚动吸附。
snap-x	scroll-snap-type: x …;	在水平轴上启用吸附。
snap-y	scroll-snap-type: y …;	在垂直轴上启用吸附。
snap-both	scroll-snap-type: both …;	在两个轴上都启用吸附。

2. 严格性工具类

这些也应用于父容器，与 snap-* 工具类一起，定义浏览器应如何严格地强制吸附。

类名	效果	用例
snap-mandatory	当滚动结束时，浏览器必须吸附到一个吸附点。	最适合显示完整项目至关重要的布局，例如全屏幻灯片演示文稿。
snap-proximity	如果接近一个吸附点，浏览器可以吸附到该点。	更宽容；适用于带有可选吸附点的长篇内容。

3. 子元素对齐工具类

这些类应用于滚动容器内的子元素，以定义它们在视口中应如何对齐。

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

迷你项目：构建水平产品轮播图

让我们构建一个常见的 UI 模式：一个水平轮播图，它将每张产品卡片吸附到容器的中心。我们将为此使用现代开发设置。

示例代码 (index.html)

请确保你已有一个现代的 Tailwind CSS 设置（如上一个教程所述）。以下 HTML 创建了一个可滚动容器，它将每个子元素吸附到中心。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Scroll Snap Carousel</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans p-8">

  <h1 class="text-3xl font-bold mb-4 text-gray-800">特色产品</h1>

  <!--
    滚动容器设置:
    - `snap-x`：启用水平吸附。
    - `snap-mandatory`：强制吸附到元素。
    - `overflow-x-auto`：允许水平滚动。
    - `flex`：将子元素排列成一行。
  -->
  <div class="snap-x snap-mandatory overflow-x-auto flex w-full space-x-4 pb-4">
    <!--
      吸附子元素设置:
      - `snap-center`：每个子元素将吸附到容器中心。
      - `flex-shrink-0`：防止卡片收缩以适应。
    -->
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">产品 A</h3>
        <p class="text-gray-600">满足您需求的高品质商品。</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">产品 B</h3>
        <p class="text-gray-600">您的另一个绝佳选择。</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">产品 C</h3>
        <p class="text-gray-600">市场上最具性价比的选择。</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">产品 D</h3>
        <p class="text-gray-600">一个优质耐用的选择。</p>
      </div>
    </div>
  </div>
</body>
</html>

最佳实践与可访问性 (a11y)

• 避免滚动陷阱： 对主页面轴（snap-y）上的 snap-mandatory 要谨慎。它可能导致使用不精确指向设备的用户难以滚动过某个部分，从而造成糟糕的体验。对于组件级别的轮播图来说，通常更安全。
• 提供替代方案： 确保用户可以通过其他方式导航到内容（例如，轮播图的箭头按钮），因为并非所有用户都能或喜欢滚动。
• 焦点管理： 对于吸附子元素内的交互式元素，确保键盘焦点（Tab 键）在用户导航时表现可预测。
• 性能： 滚动吸附具有很高的性能，因为它由浏览器的渲染引擎原生处理。