Tailwind CSS - Scroll Snap Type

Tailwind CSS Scroll Snap Type 滚动捕捉类型是一组预定义类的集合，用于控制滚动在容器内停止和对齐的特定点。

Tailwind CSS Scroll Snap Type 类

以下是 Tailwind CSS Scroll Snap Type 类的列表，用于控制滚动如何捕捉到容器内的特定点。

Tailwind CSS 滚动捕捉类型类的功能

• snap-none:禁用对齐，允许自由滚动。
• snap-x:滚动时水平对齐元素。
• snap-y:滚动时垂直对齐元素。
• snap-both:水平和垂直对齐元素。
• snap-mandatory:滚动时始终与最近的捕捉点对齐。
• snap-proximity:滚动至最近的捕捉点附近时对齐。

Tailwind CSS 滚动捕捉类型类示例

以下是Tailwind CSS 滚动的示例Snap Type 类，展示它们如何控制滚动在容器内停止和对齐的特定点。

使用 Tailwind CSS 实现水平滚动捕捉

此示例展示如何使用 Tailwind CSS 滚动捕捉类型类。以下代码应用 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 滚动捕捉类型类，该类可确保在水平滚动时，项目始终与最近的捕捉点对齐，从而改善视觉对齐效果。

示例

<!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

此示例展示了 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 滚动对齐类型类。以下代码应用了 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>