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: 確保元素始終是停止點。

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>

列印頁面