In this article, we’ll examine closer to Tailwind overscroll behaviors and explore how it can be apply to enhance user experience for your website.
It enables you to manage the behavior of content when it is scrolled beyond the edge of an element.
In pages with multiple scroll areas, this property can be used to prevent unwanted scrolling.
Before we dive into how Tailwind overscroll works, it’s important to understand what overscroll behavior is and why it’s important.
When you scroll to the top or bottom of a webpage, your browser usually continues scrolling, even when you’ve reached the end of the content – This is called overscrolling.
Overscroll behavior refers to how the browser handles this behavior when it occurs.
The default overscroll behavior for most browsers is to bounce back when the user reaches the end of the content. This can be frustrating for users, as it interrupts the scrolling experience and can make it difficult to navigate through the content.
However, there are a few different types of overscroll that can be used to enhance the user experience and make scrolling more natural and intuitive.
Tailwind CSS includes several overscroll behavior classes.
These classes can be used on any element that has overflow content, such as a scrollable container or a full-page layout.
Here’s a list of the Tailwind overscroll behavior classes:
| Classes | Overview |
| overscroll-auto | This class applies the default behavior of the browser when the user over scrolls. |
| overscroll-contain | The overscroll-contain class in Tailwind CSS is used to contain the overscrolling behavior within the boundaries of an element. |
| overscroll-none | This class is used to prevent scroll chaining on all elements and to disable the default scroll overflow behavior. |
| overscroll-y-auto | Using this class, the vertical overscrolling behavior in an element is enabled while the horizontal overscrolling behavior is disabled. |
| overscroll-y-contain | Used to contain the vertical overscrolling behavior within the boundaries of an element while enabling horizontal overscrolling. |
| overscroll-y-none | Vertical overscrolling can be disabled using this class |
| overscroll-x-auto | It allows horizontal overscrolling in an element while preventing vertical overscrolling. |
| overscroll-x-contain | Using this class, we can enable horizontal scrolling in an element while disabling vertical scrolling. |
| overscroll-x-none | Allows you to completely disable horizontal overscrolling. |
Each of these classes can be used to control how content scrolls in different directions and under different conditions.
For example, the overscroll-y-auto class allows vertical scrolling to continue past the end of the content, while the overscroll-y-none class disables vertical overscrolling completely.
In Tailwind CSS, the overscroll-auto class specifies the default behavior of the browser when the user overscrolling.
By using this feature, the browser can determine the behavior based on the content displayed.
Syntax
<element class="overscroll-auto">...</element>
To apply Tailwind overscroll-auto, simply add it to the element that you want to control.
This example demonstrates the overscroll-auto class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-auto overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
With Tailwind overscroll-contain class, you can limit the overscroll behavior within the boundaries of an element, preventing it from affecting the parent element or the browser window.
This means that the overscroll effect will be applied only to the content within the element and not to the entire page.
Syntax
<element class="overscroll-contain">...</element>
The following example illustrates the overscroll-contain class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-contain overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-contain</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
The overscroll-none class in Tailwind CSS is used to disable overscrolling behavior completely, preventing any scrolling beyond the boundaries of an element.
Syntax
<element class="overscroll-none">...</element>
Below example provides a brief outline of the overscroll-none class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-none overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-none</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
The Tailwind CSS class overscroll-y-auto is used to enable vertical overscrolling behavior in an element while disabling horizontal overscrolling behavior.
Syntax
<element class="overscroll-y-auto">...</element>
In this example the overscroll-y-auto class is demonstrated:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-y-auto overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
The purpose of this class is to contain vertical overscrolling within an element while also allowing horizontal overscrolling.
Syntax
<element class="overscroll-y-contain">...</element>
For this example, let’s consider implementing the overscroll-y-contain class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-y-contain overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
This purpose of this class is to disable the vertical overscrolling behavior entirely, which prevents any scrolling beyond the top and bottom edges of an element.
Syntax
<element class="overscroll-y-none">...</element>
Below example illustrates the use of the overscroll-y-none class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-y-none overflow-y-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
In this case, only horizontal overscrolling is allowed in an element while vertical overscrolling is not.
Syntax
<element class="overscroll-x-auto">...</element>
In this example, we are going to implement the overscroll-x-auto class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-x-auto overflow-x-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
The overscroll-x-contain class in Tailwind CSS can be used to limit the horizontal overscrolling behavior within the boundaries of an element
Syntax
<element class="overscroll-x-contain">...</element>
This example revolves around the overscroll-x-contain class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-x-contain overflow-x-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
This class is used to completely disable horizontal overscrolling behavior, which prevents any
scrolling beyond the left and right boundaries of an element.
Syntax
<element class="overscroll-x-none">...</element>
In this example, our focus is on the overscroll-x-none class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="flex justify-center mt-4 font-medium h-32 overflow-scroll">
<div class="overscroll-x-none overflow-x-scroll
bg-gray-300 p-2 w-1/2 h-24">
<h1>overscroll-y-auto</h1>
Aliquam lobortis nisl in auctor tempus.
Proin venenatis arcu ex, in mattis magna
hendrerit ac. Sed fringilla molestie massa
eu varius. Maecenas eu luctus mauris,
eu finibus nulla. Proin vulputate sem in
leo vehicula, a gravida est tincidunt.
</div>
</div>
</body>
</html>
