Tailwind CSS - Scroll Snap Stop

Previous
Quiz
Next

Tailwind CSS Scroll Snap Stop is a collection of predefined classes that control whether an element acts as a stop point while scrolling.

Tailwind CSS Scroll Snap Stop Classes

Below is a list of Tailwind CSS Scroll Snap Stop classes for controlling which elements act as scroll stop points.

Class CSS Properties
snap-normal scroll-snap-stop: normal;
snap-always scroll-snap-stop: always;

Functionality of Tailwind CSS Scroll Snap Stop Classes

  • snap-normal: Allows skipping the element while scrolling.
  • snap-always: Ensures the element is always a stop point.

Tailwind CSS Scroll Snap Stop Class Examples

Below are examples of Tailwind CSS Scroll Snap Stop classes, showing how they control whether an element should act as a stopping point during scrolling.

Aligning Elements with Snap Normal

This example shows how Tailwind CSS uses the snap-normal class to set scroll stop points. With this class, blocks may not always align at the centre during scrolling and can be skipped based on the scroll speed and distance.

Example

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

Ensuring Stop Points with Snap Always

This example shows how Tailwind CSS uses the snap-always class to define scroll stop points. This means every item will always align to the centre of the viewport while scrolling.

Example

<!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>
Print Page
Previous
Next