Tailwind CSS - Scroll Snap Stop

Tailwind CSS Scroll Snap Stop 是一组预定义类，用于控制元素在滚动时是否充当停止点。

Tailwind CSS Scroll Snap Stop 类

以下是 Tailwind CSS Scroll Snap Stop 类列表，用于控制哪些元素充当滚动停止点。

Tailwind CSS 滚动捕捉停止类的功能

• snap-normal:允许在滚动时跳过元素。
• snap-always:确保元素始终为停止点。

Tailwind CSS 滚动捕捉停止类示例

以下是 Tailwind CSS 滚动捕捉停止 类的示例，展示了它们如何控制元素在滚动过程中是否应充当停止点。

使用 Snap Normal 对齐元素

此示例展示了 Tailwind CSS 如何使用 snap-normal 类设置滚动停止点。使用此类，滚动过程中的块可能不会始终居中对齐，并且可以根据滚动速度和距离跳过某些块。

示例

  
<!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 Stop 
    </h2> 
    <h3 class="text-lg font-semibold mb-2">Snap Normal</h3>
    <div class="flex overflow-x-auto snap-x gap-4">
        <div class="snap-normal snap-center flex-shrink-0 w-64 h-32 
                    bg-red-500  text-white flex items-center justify-center">
                Block 1
        </div>
        <div class="snap-normal snap-center flex-shrink-0 w-64 h-32 
                    bg-blue-500  text-white flex items-center justify-center">
                Block 2
        </div>
        <div class="snap-normal snap-center flex-shrink-0 w-64 h-32 
                    bg-green-500  text-white flex items-center justify-center">
                Block 3
        </div>
        <div class="snap-normal snap-center flex-shrink-0 w-64 h-32 
                    bg-yellow-500  text-white flex items-center justify-center">
                Block 4
        </div>
        <div class="snap-normal snap-center flex-shrink-0 w-64 h-32 
                    bg-purple-500  text-white flex items-center justify-center">
                Block 5
        </div>
    </div>
    <p class="text-center mb-8">With <strong>snap-normal</strong>, 
        blocks might be skipped while scrolling.
    </p> 
</body>

</html>

使用 Snap Always 确保停止点

此示例展示了 Tailwind CSS 如何使用 snap-always 类来定义滚动停止点。这意味着每个项目在滚动时都将始终与视口中心对齐。

示例

<!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 Stop 
    </h2> 
    <h3 class="text-lg font-semibold mb-2">Snap Always</h3>
    <div class="flex overflow-x-auto snap-x gap-4">
        <div class="snap-always snap-center flex-shrink-0 w-64 h-32 
                    bg-red-500  text-white flex items-center justify-center">
                Block X
        </div>
        <div class="snap-always snap-center flex-shrink-0 w-64 h-32 
                    bg-blue-500  text-white flex items-center justify-center">
                Block Y
        </div>
        <div class="snap-always snap-center flex-shrink-0 w-64 h-32 
                    bg-green-500  text-white flex items-center justify-center">
                Block Z
        </div>
        <div class="snap-always snap-center flex-shrink-0 w-64 h-32 
                    bg-yellow-500  text-white flex items-center justify-center">
                Block W
        </div>
    </div>
    <p class="text-center">With <strong>snap-always</strong>, 
        each block is always a stop point.
    </p> 
</body>

</html>