Tailwind CSS - 滾動溢位行為

上一頁
下一頁

Tailwind CSS 滾動溢位行為是一個實用程式類，它告訴我們當元素到達其滾動區域的邊界時瀏覽器的行為。

Tailwind CSS 滾動溢位行為類

以下是Tailwind CSS 滾動溢位行為類列表，它提供了一種有效處理元素溢位行為的方法。

類 CSS 屬性
overscroll-auto overscroll-behavior: auto;
overscroll-contain overscroll-behavior: contain;
overscroll-none overscroll-behavior: none;
overscroll-y-auto overscroll-behavior-y: auto;
overscroll-y-contain overscroll-behavior-y: contain;
overscroll-y-none overscroll-behavior-y: none;
overscroll-x-auto overscroll-behavior-x: auto;
overscroll-x-contain overscroll-behavior-x: contain;
overscroll-x-none overscroll-behavior-x: none;

Tailwind CSS 滾動溢位行為類的功能

  • overscroll-auto: 此類替換 CSS overscroll-behavior: auto; 屬性。此類具有預設行為，允許頁面在達到元素邊界時滾動。
  • overscroll-contain: 此類替換 CSS overscroll-behavior: contain; 屬性。此類只允許滾動元素，而不是頁面。
  • overscroll-none: 此類替換 CSS overscroll-behavior: none; 屬性。此類防止頁面在達到元素邊界時滾動。
  • overscroll-y-auto: 此類替換 CSS overscroll-behavior-y: auto; 屬性。此類允許頁面在達到元素邊界時沿 y 軸滾動。
  • overscroll-y-contain: 此類替換 CSS overscroll-behavior-y: contain; 屬性。此類允許沿 y 軸滾動元素，而不是頁面。
  • overscroll-y-none: 此類替換 CSS overscroll-behavior-y: none; 屬性。此類防止頁面在達到元素邊界時沿 y 軸滾動。
  • overscroll-x-auto: 此類替換 CSS overscroll-behavior-x: auto; 屬性。此類允許頁面在達到元素邊界時沿 x 軸滾動。
  • overscroll-x-contain: 此類替換 CSS overscroll-behavior-x: contain; 屬性。此類允許沿 x 軸滾動元素，而不是頁面。
  • overscroll-x-none: 此類替換 CSS overscroll-behavior-x: none; 屬性。此類防止頁面在達到元素邊界時沿 x 軸滾動。

Tailwind CSS 滾動溢位行為類示例

以下示例將說明 Tailwind CSS 滾動溢位行為類實用程式。

Tailwind CSS 滾動溢位自動類

以下示例說明了Tailwind CSS 滾動溢位自動類的用法。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll Auto Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-auto">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This class replaces CSS overscroll-behavior: auto; property.
            This class has default behavior allow page to scroll when
            element boundary is reached. In this example when we scroll
            the primary div, As we used overscroll auto class which will
            enable parent div to be scrolled when primary div's boundary
            reached.
        </p>
    </div>
</body>

</html>

Tailwind CSS 滾動溢位包含類

以下示例說明了Tailwind CSS 滾動溢位包含類的用法。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll Contain Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-contain">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This class replaces CSS overscroll-behavior: contain;
            property. This class allow to scroll the element only not
            the page. In this example when we scroll the primary div, As
            we used overscroll Contain class it will not allow to scroll
            the parent div to be scrolled when primary div's bounder
            reached.
        </p>
    </div>
</body>

</html>

Tailwind CSS 滾動溢位無類

以下示例說明了Tailwind CSS 滾動溢位無類的用法。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll None Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-none">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This class replaces CSS overscroll-behavior: none; property.
            This class prevents scrolling of page when elements boundary
            reached. In this example when we scroll the primary div, As
            we used overscroll none class it will not allow to scroll
            the parent div to be scrolled when primary div's bounder
            reached.
        </p>
    </div>
</body>

</html>

Tailwind CSS 滾動溢位-Y-自動類

以下示例說明了Tailwind CSS 滾動溢位-y-自動類的用法。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-y-auto Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-y-auto">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-y: auto;
            property. This class allow to scroll page on y-axis when
            element boundary reached. In this example when we scroll the
            primary div, As we used overscroll-y-auto class it will to
            scroll the page on y-axis 
        </p>
    </div>
</body>

</html>

Tailwind CSS 滾動溢位-Y-包含類

以下示例說明了Tailwind CSS 滾動溢位-y-包含類的用法。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-y-contain Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-y-contain">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-y: contain;
            property. This class allow to scroll the element on y-axis
            not the page. In this example when we scroll the primary div
            , As we used overscroll-y-contain class it will not allow
                the page to scroll.
        </p>
    </div>
</body>

</html>

Tailwind CSS 滾動溢位-Y-無類

以下示例演示瞭如何使用Tailwind CSS Overscroll-y-none 類。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-y-none Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-y-none">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-y: none;
            property. This class prevents page scrolling on y-axis when
            elements boundary reached. In this example when we scroll
            the primary div, As we used overscroll-y-none class it
            will not allow the page to scroll.
        </p>
    </div>
</body>

</html>

Tailwind CSS Overscroll-x-auto 類

以下示例演示瞭如何使用Tailwind CSS Overscroll-x-auto 類。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-x-auto Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-x-auto">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-x: auto;
            property. This class allow to scroll page on x-axis when
            element boundary reached. In this example when we scroll
            the primary div, As we used overscroll-x-auto class it
            will allow the page to scroll on x axis.
        </p>
    </div>
</body>

</html>

Tailwind CSS Overscroll-x-Contain 類

以下示例演示瞭如何使用Tailwind CSS Overscroll-x-Contain 類。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-x-Contain Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-x-contain">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-x: contain;
            property. This class allow to scroll the element on x-axis
            not the page. In this example when we scroll the primary 
            div,As we used overscroll-x-contain class it will not allow
            the page to scroll on x axis.
        </p>
    </div>
</body>

</html>

Tailwind CSS Overscroll-x-none 類

以下示例演示瞭如何使用Tailwind CSS Overscroll-x-none 類。

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h1 class=" text-3xl mb-3">
        Tailwind CSS Overscroll-X-None Class
    </h1>

    <div class="p-4 w-3/4 space-y-3
                bg-green-200">
        
        <div class="p-2 w-2/3 h-24 bg-green-400 
                    overflow-y-scroll overscroll-x-none">
            Tutorials Point originated from the idea that there exists a
            class of readers who respond better to online content and
            prefer to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </div>
        <p>
            This Class replaces CSS overscroll-behavior-x: none;
            property. This class prevents page scrolling on x-axis when
            elements boundary reached. In this example when we scroll
            the primary div, As we used overscroll-x-none class it
            will not allow the page to scroll on x axis.
        </p>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告