Tailwind CSS provides utilities to control what happens when the edge of a scrollable area is reached. These utilities help manage scroll chaining between nested or multiple scrollable areas.
Tailwind CSS Overscroll Behavior Classes
overscroll-autooverscroll-containoverscroll-noneoverscroll-y-autooverscroll-y-containoverscroll-y-noneoverscroll-x-autooverscroll-x-containoverscroll-x-none
1. overscroll-auto
The overscroll-auto utility is used to set the overscroll behavior to the default value. When the user reaches the boundary of the primary scrolling area, scrolling can continue in the parent scrolling area.
Syntax
<element class="overscroll-auto">...</element>Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll Auto</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-auto bg-green-400 p-4">
<p class="mb-4">
This is a scrollable element using the
overscroll-auto class.
</p>
<p class="mb-4">
Scroll to the boundary of this element to observe
the default overscroll behavior.
</p>
<p>
This content makes the element vertically scrollable.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. overscroll-contain
The overscroll-contain utility is used to prevent scrolling in the target area from triggering scrolling in the parent element. However, supported operating systems can still preserve bounce effects when the user scrolls beyond the boundary of the container.
Syntax
<element class="overscroll-contain">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll Contain</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-contain bg-green-400 p-4">
<p class="mb-4">
This is a scrollable element using the
overscroll-contain class.
</p>
<p class="mb-4">
Scrolling is contained within this element when
its boundary is reached.
</p>
<p>
This content makes the element vertically scrollable.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. overscroll-none
The overscroll-none utility is used to prevent scrolling in the target area from triggering scrolling in the parent element. It also prevents bounce effects when the user scrolls beyond the boundary of the container.
Syntax
<element class="overscroll-none">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll None</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-none bg-green-400 p-4">
<p class="mb-4">
This is a scrollable element using the
overscroll-none class.
</p>
<p class="mb-4">
Parent scrolling is prevented when the boundary
of this element is reached.
</p>
<p>
The overscroll effect is also prevented.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
4. overscroll-y-auto
The overscroll-y-auto utility sets the overscroll behavior on the vertical axis to auto. It allows the default browser behavior when the vertical scrolling boundary is reached.
Syntax
<element class="overscroll-y-auto">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll Y Auto</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-y-auto bg-green-400 p-4">
<p class="mb-4">
This element uses the overscroll-y-auto class.
</p>
<p class="mb-4">
Its vertical overscroll behavior remains at the
default value.
</p>
<p>
Scroll vertically to observe the behavior.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
5. overscroll-y-contain
The overscroll-y-contain utility prevents vertical scrolling in the target area from triggering scrolling in the parent element when the vertical boundary is reached.
Syntax
<element class="overscroll-y-contain">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<!--Driver Code Starts-->
<b>Tailwind CSS Overscroll Y Contain</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-y-contain bg-green-400 p-4">
<p class="mb-4">
This element uses the overscroll-y-contain class.
</p>
<p class="mb-4">
Vertical scroll chaining is prevented when the
boundary of this element is reached.
</p>
<p>
This creates an independently scrolling area.
</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
6. overscroll-y-none
The overscroll-y-none utility prevents vertical scrolling in the target area from triggering scrolling in the parent element. It also prevents vertical bounce effects.
Syntax
<element class="overscroll-y-none">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll Y None</b>
<div class="mx-auto mt-6 h-32 w-64 overflow-y-auto
overscroll-y-none bg-green-400 p-4">
<p class="mb-4">
This element uses the overscroll-y-none class.
</p>
<p class="mb-4">
Vertical scrolling does not trigger scrolling in
the parent when the boundary is reached.
</p>
<p>
The vertical overscroll effect is also prevented.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
7. overscroll-x-auto
The overscroll-x-auto utility sets the overscroll behavior on the horizontal axis to auto. It allows the default browser behavior when the horizontal scrolling boundary is reached.
Syntax
<element class="overscroll-x-auto">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll X Auto</b>
<div class="mx-auto mt-6 w-64 overflow-x-auto
overscroll-x-auto bg-green-400 p-4">
<div class="flex w-max gap-4">
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 1
</div>
<div class="h-24 w-48 shrink-0 bg-green-300 p-4">
Item 2
</div>
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 3
</div>
</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
8. overscroll-x-contain
The overscroll-x-contain utility prevents horizontal scrolling in the target area from triggering scrolling in the parent element when the horizontal boundary is reached.
Syntax
<element class="overscroll-x-contain">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll X Contain</b>
<div class="mx-auto mt-6 w-64 overflow-x-auto
overscroll-x-contain bg-green-400 p-4">
<div class="flex w-max gap-4">
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 1
</div>
<div class="h-24 w-48 shrink-0 bg-green-300 p-4">
Item 2
</div>
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 3
</div>
</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
9. overscroll-x-none
The overscroll-x-none utility prevents horizontal scrolling in the target area from triggering scrolling in the parent element. It also prevents horizontal bounce effects.
Syntax
<element class="overscroll-x-none">...</element>
Example
<!--Driver Code Starts-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Overscroll X None</b>
<div class="mx-auto mt-6 w-64 overflow-x-auto
overscroll-x-none bg-green-400 p-4">
<div class="flex w-max gap-4">
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 1
</div>
<div class="h-24 w-48 shrink-0 bg-green-300 p-4">
Item 2
</div>
<div class="h-24 w-48 shrink-0 bg-green-200 p-4">
Item 3
</div>
</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->