Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Overscroll Behavior

Quiz

Tailwind CSS Overscroll Behavior is a utility class that tells us how browsers behave when an element reaches the boundary of its scrolling area.

Tailwind CSS Overscroll Behavior Classes

The following is the list of Tailwind CSS Overscroll Behavior Classes that provides an effective way of handling overflowed behavior of an element.

Class	CSS Properties
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;

Functionality of Tailwind CSS Overscroll Behavior Classes

overscroll-auto: This class replaces CSS overscroll-behavior: auto; property. This class has default behavior allow page to scroll when element boundary is reached.
overscroll-contain: This class replaces CSS overscroll-behavior: contain; property. This class allow to scroll the element only not the page.
overscroll-none: This class replaces CSS overscroll-behavior: none; property. This class prevents scrolling of page when elements boundary reached.
overscroll-y-auto: This class replaces CSS overscroll-behavior-y: auto; property. This class allow to scroll page on y-axis when element boundary reached.
overscroll-y-contain: This class replaces CSS overscroll-behavior-y: contain; property. This class allow to scroll the element on y-axis not the page.
overscroll-y-none: This class replaces CSS overscroll-behavior-y: none; property. This class prevents page scrolling on y-axis when elements boundary reached.
overscroll-x-auto: This class replaces CSS overscroll-behavior-x: auto; property. This class allow to scroll page on x-axis when element boundary reached.
overscroll-x-contain: This class replaces CSS overscroll-behavior-x: contain; property. This class allow to scroll the element on x-axis not the page.
overscroll-x-none: This class replaces CSS overscroll-behavior-x: none; property. This class prevents page scrolling on x-axis when elements boundary reached.

Tailwind CSS Overscroll Behavior Class Examples

The following examples will illustrate the Tailwind CSS Overscroll Behavior class utility.

Tailwind CSS Overscroll Auto Class

The below example illustrates the use of Tailwind CSS Overscroll Auto Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll Contain Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll None Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-y-auto Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-y-contain Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-y-none Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-x-auto Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-x-Contain Class.

<!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 Class

The below example is illustrating the use of Tailwind CSS Overscroll-x-none Class.

<!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>

Print Page