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>
打印页面

上一页
下一页
广告