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:** 此類使滾動平滑流暢。

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>

列印頁面