Tailwind CSS - 滚动行为

Tailwind CSS **滚动行为**是一组预定义的类，用于管理滚动效果，可以实现平滑或瞬间滚动，并可以控制滚动时间。

Tailwind CSS 滚动行为类

下面列出了用于管理元素滚动行为的 Tailwind CSS 滚动行为类。

类	CSS 属性
scroll-auto	scroll-behavior: auto;
scroll-smooth	scroll-behavior: smooth;

Tailwind CSS 滚动行为类的功能

**scroll-auto:** 此类使用浏览器的默认滚动行为。
**scroll-smooth:** 此类使滚动平滑流畅。

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 滚动行为类的示例，展示如何在元素内控制滚动的平滑度。这些类可以实现平滑的滚动效果，从而增强用户体验。

默认滚动和平滑滚动

此示例展示了 Tailwind CSS 滚动行为类的工作方式。**scroll-auto** 类使用浏览器的默认滚动，而 **scroll-smooth** 类则提供平滑流畅的滚动。

示例

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-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** 类都可以实现平滑滚动，但是带有悬停效果，可以更改背景和边框颜色。

示例

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

打印页面