Tailwind CSS - Scroll Snap 型別

上一頁
下一頁

Tailwind CSS Scroll Snap 型別是一組預定義的類，用於控制在容器內滾動停止和對齊的特定點。

Tailwind CSS Scroll Snap 型別類

以下是用於控制滾動如何在容器內捕捉到特定點的 Tailwind CSS Scroll Snap 型別類的列表。

類 CSS 屬性
snap-none scroll-snap-type: none;
snap-x scroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-y scroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-both scroll-snap-type: both var(--tw-scroll-snap-strictness);
snap-mandatory --tw-scroll-snap-strictness: mandatory;
snap-proximity --tw-scroll-snap-strictness: proximity;

Tailwind CSS Scroll Snap 型別類的功能

  • snap-none: 停用對齊，允許自由滾動。
  • snap-x: 在滾動時水平對齊元素。
  • snap-y: 在滾動時垂直對齊元素。
  • snap-both: 水平垂直同時對齊元素。
  • snap-mandatory: 在滾動過程中始終對齊到最近的捕捉點。
  • snap-proximity: 當您滾動到捕捉點附近時，對齊到最近的捕捉點。

Tailwind CSS Scroll Snap 型別類示例

以下是 **Tailwind CSS Scroll Snap 型別** 類的示例，展示了它們如何控制在容器內滾動停止和對齊的特定點。

使用 Tailwind CSS 進行水平滾動捕捉

此示例演示如何使用 Tailwind CSS Scroll Snap 型別類。以下程式碼應用 **snap-x** 類以啟用水平滾動捕捉並設定子元素的滾動捕捉對齊方式。當您水平滾動時，每個專案都會整齊地與滾動捕捉點對齊。

示例

  
<!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-4">
        Tailwind CSS Scroll Snap Type
    </h2>  
    <h2 class="text-xl font-bold mb-4">scroll-snap-x</h2>
    <div class="flex overflow-x-auto snap-x gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-red-500 text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-blue-500 text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-green-500 text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-x</strong>, 
        items align horizontally while scrolling.
    </p>
</body>

</html>

Tailwind CSS 強制捕捉點

此示例演示如何透過使用 **snap-mandatory** 類來使用 Tailwind CSS Scroll Snap 型別類，該類確保在您水平滾動時，專案始終對齊到最近的捕捉點，從而改善視覺對齊。

示例

<!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 Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-mandatory</h2>
    <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-mandatory</strong>, 
        items will always snap to the nearest point.
    </p>
</body>

</html>

Tailwind CSS 使用捕捉臨近性進行滾動對齊

此示例演示 **snap-proximity** 類，該類確保專案在您水平滾動時捕捉到最近的點。當您接近捕捉點時，滾動會將專案對齊到該點，從而提供更流暢的滾動體驗。

示例

<!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 Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-proximity</h2>
    <div class="flex overflow-x-auto snap-x snap-proximity gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block X
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block Y
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block Z
        </div>
    </div>
    <p class="text-center">With <strong>snap-proximity</strong>,
        items align to the nearest point when close.
    </p>
</body>

</html>

使用強制對齊進行垂直捕捉滾動

此示例演示如何使用 Tailwind CSS Scroll Snap 型別類。以下程式碼應用 **snap-y** 和 **snap-mandatory**，使垂直滾動流暢且精確。當您滾動瀏覽專案時，每個專案都將整齊地捕捉到位，確保一致且有序的檢視。

示例

  
<!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 Type
    </h2>
    <h2 class="text-xl font-bold mb-4">
        scroll-snap-y with snap-mandatory 
    </h2>
    <div class="flex flex-col overflow-y-auto snap-y 
        snap-mandatory gap-4 h-44">
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
         <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block D
        </div>
    </div>
    <p class="text-center">With <strong>snap-y</strong> and 
        <strong>snap-mandatory</strong>, items align 
        vertically and always snap to a point.
    </p>
</body>

</html>
列印頁面

上一頁
下一頁
廣告