Tailwind CSS - Scroll Behavior

Tailwind CSS Scroll Behavior 是一组预定义类，用于管理滚动效果，支持平滑滚动或即时滚动，并允许控制滚动时间。

Tailwind CSS Scroll Behavior 类

以下是用于管理元素滚动行为的 Tailwind CScroll Behavior 类列表。

Tailwind CSS 滚动行为类的功能

• scroll-auto:此类使用浏览器的默认滚动行为。
• scroll-smooth:此类使滚动更顺畅、更轻松。

Tailwind CSS 滚动行为类示例

以下是 Tailwind CSS 滚动行为类的示例，展示了如何控制元素内的滚动平滑度。这些类可实现平滑的滚动效果，从而提升用户体验。

默认滚动和平滑滚动

此示例展示了 Tailwind CSS 滚动行为类的工作原理。scroll-auto 类使用浏览器的默认滚动，而 scroll-smooth 类提供平滑、轻松的滚动。

示例

  
<!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 滚动行为与悬停效果

此示例展示了 Tailwind CSS 滚动行为与悬停效果。scroll-auto 和 scroll-smooth 类均支持平滑滚动，但悬停效果会改变背景和边框颜色。

示例

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