笙亿网络策划

Tailwind CSS 怎么设置滚动行为？

约 6 分钟读完 3 阅
文章导读
Previous Quiz Next Tailwind CSS Scroll Behavior 是一组预定义的 class，用于管理滚动效果，支持平滑滚动或即时滚动，并允许控制滚动时机。
📋 目录
  1. 壹 Tailwind CSS 滚动行为 Class
  2. 贰 Tailwind CSS 滚动行为 Class 的功能
  3. 叁 Tailwind CSS 滚动行为 Class 示例
  4. 肆 默认滚动和平滑滚动
  5. 伍 Tailwind CSS 滚动行为与悬停效果
A A

Tailwind CSS - 滚动行为

Previous
Quiz
Next

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

Tailwind CSS 滚动行为 Class

以下是用于管理元素滚动行为的 Tailwind CSS 滚动行为 class 列表。

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

Tailwind CSS 滚动行为 Class 的功能

  • scroll-auto: 该 class 使用浏览器的默认滚动行为。
  • scroll-smooth: 该 class 使滚动变得平滑且流畅。

Tailwind CSS 滚动行为 Class 示例

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

默认滚动和平滑滚动

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

示例

  
<!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">
                默认滚动行为。
            </div>
        </div>
        <p class="text-sm mb-2">使用浏览器的默认滚动。</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">
                平滑滚动行为。
            </div>
        </div>
        <p class="text-sm mt-2">提供平滑、流畅的滚动。</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">
                平滑的滚动行为。
            </div>
        </div>
        <p class="text-sm mb-2">
            使用浏览器的默认滚动。
        </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">
                平滑的滚动行为。
            </div>
        </div>
        <p class="text-sm mt-2">
            提供平滑、轻松的滚动体验。
        </p>
    </div>
</body>

</html>