Tailwind CSS - 卷轴捕捉对齐

Tailwind CSS Scroll Snap Align 是一个预定义类别的集合，用于控制可滚动项目在容器中的对齐方式。

Tailwind CSS 卷轴捕捉对齐类

以下是用于管理可滚动项目在其容器中对齐方式的 Tailwind CSS 卷轴捕捉对齐类列表。

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

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>

打印页面