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>

列印頁面