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>
打印页面
上一页
下一页
广告