Tailwind CSS - 卷动捕捉停止

Tailwind CSS 卷动捕捉停止是一组预定义的类，用于控制元素在滚动时是否充当停止点。

Tailwind CSS 卷动捕捉停止类

下面列出了用于控制哪些元素充当滚动停止点的 Tailwind CSS 卷动捕捉停止类。

类	CSS 属性
snap-normal	scroll-snap-stop: normal;
snap-always	scroll-snap-stop: always;

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

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 卷动捕捉停止类示例

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

使用 Snap Normal 对齐元素

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

示例

Open Compiler

  
<!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类定义滚动停止点。这意味着每个项目在滚动时都将始终对齐到视口的中心。

示例

Open Compiler

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

打印页面