Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Scroll Behavior

Quiz

Tailwind CSS Scroll Behavior is a collection of predefined classes that manage scrolling effects, enabling either smooth or instant scrolling and allowing control over scroll timing.

Tailwind CSS Scroll Behavior Classes

Below is a list of Tailwind CSS Scroll Behavior classes for managing the scrolling behavior of elements.

Class	CSS Properties
scroll-auto	scroll-behavior: auto;
scroll-smooth	scroll-behavior: smooth;

Functionality of Tailwind CSS Scroll Behavior Classes

scroll-auto: This class uses the default scrolling behavior of the browser.
scroll-smooth: This class makes scrolling smooth and easy.

Tailwind CSS Scroll Behavior Class Examples

Below are examples of Tailwind CSS Scroll Behavior classes that show how to control scrolling smoothness within an element. These classes enable smooth scrolling effects to enhance the user experience.

Default and Smooth Scrolling

This example shows how Tailwind CSS scroll behavior classes work. The scroll-autoclass uses the browser's default scrolling, while the scroll-smooth class provides smooth, easy 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-2">
        Tailwind CSS Scroll Behavior
    </h2>
    <div>
        <h3 class="underline font-semibold mb-2">Scroll Auto</h3>
        <div class="h-32 overflow-auto border 
            border-gray-300 p-2 scroll-auto">
            <div class="h-64 bg-indigo-100">
                Default scrolling behavior.
            </div>
        </div>
        <p class="text-sm mb-2">Uses the browser's default scrolling.</p>
    </div>
    <div>
        <h3 class="underline font-semibold mb-2">Scroll Smooth</h3>
        <div class="h-32 overflow-auto border 
            border-gray-300 p-2 scroll-smooth">
            <div class="h-64 bg-indigo-100">
                Smooth scrolling behavior.
            </div>
        </div>
        <p class="text-sm mt-2">Provides smooth, easy scrolling.</p>
    </div>
</body>

</html>

Tailwind CSS Scroll Behavior with Hover Effects

This example shows Tailwind CSS scroll behavior with hover effects. Both scroll-auto and scroll-smooth classes enable smooth scrolling, but with hover effects that change the background and border color.

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-2">
        Tailwind CSS Scroll Behavior
    </h2>
    <div>
        <h3 class="underline font-semibold mb-2">
            Scroll Auto
        </h3>
        <div class="h-32 overflow-auto border p-2 scroll-smooth  
            hover:bg-gray-300 border-gray-500">
            <div class="h-64 bg-indigo-100">
                Smooth scrolling behavior.
            </div>
        </div>
        <p class="text-sm mb-2">
            Uses the browser's default scrolling.
        </p>
    </div>
    <div>
        <h3 class="underline font-semibold mb-2">
            Scroll Smooth
        </h3>
        <div class="h-32 overflow-auto border p-2 scroll-smooth 
            hover:bg-gray-300 hover:border-gray-500">
            <div class="h-64 bg-indigo-100">
                Smooth scrolling behavior.
            </div>
        </div>
        <p class="text-sm mt-2">
            Provides smooth, easy scrolling.
        </p>
    </div>
</body>

</html>

Print Page