Tailwind CSS - Scroll Snap Align

Tailwind CSS 滚动对齐 (Scroll Snap Align) 是一组预定义类，用于控制可滚动项目在容器内的对齐方式。

Tailwind CSS 滚动对齐 (Scroll Snap Align) 类

以下是 Tailwind CSS 滚动对齐 (Scroll Snap Align) 类列表，用于管理可滚动项目在其容器内的对齐方式。

Tailwind CSS 滚动捕捉对齐类的功能

• snap-start:将项目的起始位置与容器的起始位置对齐。
• snap-end:将项目的结尾与容器的结尾对齐。
• snap-center:将项目置于容器内的中心位置。
• snap-align-none:禁用项目的滚动捕捉功能。

Tailwind CSS 滚动捕捉对齐类示例

以下是 Tailwind CSS 滚动捕捉对齐类的示例，展示了每个类如何影响可滚动容器内元素的对齐方式。

使用 Tailwind CSS 实现起始位置对齐

此示例展示了如何使用Tailwind CSS 滚动对齐类。snap-start 类用于在滚动时将项目与容器的起始位置对齐。这意味着，当您滚动浏览项目时，每个项目都会与视口或容器的左边缘对齐。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap Start</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-72 h-24 bg-red-500 snap-start">Item 1</div>
        <div class="flex-shrink-0 w-72 h-24 bg-blue-500 snap-start">Item 2</div>
        <div class="flex-shrink-0 w-72 h-24 bg-green-500 snap-start">Item 3</div>
        <div class="flex-shrink-0 w-64 h-24 bg-yellow-500 snap-start">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-start</strong>, 
        items align to the left.
    </p>
</body>

</html>

使用 Tailwind CSS 实现对齐中心

此示例展示了如何使用 Tailwind CSS 中的 snap-center 类，该类可在滚动时使项目在容器内居中。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap Center</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-72 h-24 bg-red-500 snap-center">Item 1</div>
        <div class="flex-shrink-0 w-72 h-24 bg-blue-500 snap-center">Item 2</div>
        <div class="flex-shrink-0 w-72 h-24 bg-green-500 snap-center">Item 3</div>
        <div class="flex-shrink-0 w-72 h-24 bg-yellow-500 snap-center">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-center</strong>,
        items align to the center.
    </p>
</body>

</html>

使用 Tailwind CSS 实现对齐末端

此示例展示了 Tailwind CSS 中的 snap-end 类，该类在滚动时将项目与容器的末端(右边缘)对齐。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap End</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-52 h-24 bg-red-500 snap-end">Item 1</div>
        <div class="flex-shrink-0 w-52 h-24 bg-blue-500 snap-end">Item 2</div>
        <div class="flex-shrink-0 w-52 h-24 bg-green-500 snap-end">Item 3</div>
        <div class="flex-shrink-0 w-52 h-24 bg-yellow-500 snap-end">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-end</strong>, 
        items align to the right.
    </p>
</body>

</html>