Tailwind CSS - Overscroll Behavior

Tailwind CSS Overscroll Behavior 是一个实用类，它告诉我们当元素到达其滚动区域边界时浏览器会如何表现。

Tailwind CSS Overscroll Behavior 类

以下是 Tailwind CSS Overscroll Behavior 类的列表，这些类提供了一种有效处理元素溢出行为的方法。

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 Overscroll Behavior 类示例

以下示例将说明 Tailwind CSS Overscroll Behavior 类的实用功能。

Tailwind CSS Overscroll Auto 类

以下示例说明了 Tailwind CSS Overscroll 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 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 Overscroll Contain 类

以下示例说明了 Tailwind CSS Overscroll 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 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 Overscroll None 类

以下示例说明了 Tailwind CSS Overscroll 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 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 Overscroll-Y-Auto 类

以下示例说明了 Tailwind CSS Overscroll-y-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-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 Overscroll-Y-Contain 类

以下示例说明了 Tailwind CSS Overscroll-y-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-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 Overscroll-Y-none 类

以下示例说明了 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>