Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS
The CSS overscroll-behavior property controls what happens when a user scrolls beyond the boundary of a scrollable area. On mobile browsers, this feature is particularly useful for disabling the pull-to-refresh gesture that occurs when users scroll past the top of a webpage.
Syntax
selector {
overscroll-behavior: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default browser behavior (allows pull-to-refresh) |
contain |
Prevents scrolling from affecting parent elements |
none |
Completely disables overscroll effects including pull-to-refresh |
Example 1: Disabling Pull-to-Refresh on Body
To disable pull-to-refresh on the entire page, apply overscroll-behavior: none to the body element −
<!DOCTYPE html>
<html>
<head>
<style>
body {
overscroll-behavior: none;
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
height: 200vh; /* Make page scrollable */
}
.content {
background-color: #f0f8ff;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Pull-to-Refresh Disabled</h2>
<div class="content">
<p>Try scrolling to the top or bottom of this page on a mobile device. The pull-to-refresh gesture is now disabled due to overscroll-behavior: none on the body element.</p>
</div>
<div class="content">
<p>This prevents the browser's default overscroll behavior, including the pull-to-refresh feature that typically appears when scrolling past the page boundaries.</p>
</div>
</body>
</html>
A page with light blue content boxes that prevents pull-to-refresh when scrolled beyond boundaries on mobile browsers.
Example 2: Controlling Overscroll for Specific Container
You can also apply overscroll behavior to specific scrollable containers −
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-container {
width: 300px;
height: 150px;
overflow-y: auto;
overscroll-behavior-y: contain;
border: 2px solid #333;
padding: 15px;
margin: 20px;
background-color: #fffacd;
}
.content {
height: 400px;
line-height: 1.6;
}
</style>
</head>
<body>
<h2>Container with Controlled Overscroll</h2>
<div class="scrollable-container">
<div class="content">
<p>This container has overscroll-behavior-y: contain applied. Scroll within this box and notice how the overscroll is contained within this element.</p>
<p>The contain value prevents the scroll from affecting parent elements while still allowing normal scrolling within the container itself.</p>
<p>This is useful for modal dialogs or embedded scrollable content where you want to prevent background scrolling.</p>
</div>
</div>
</body>
</html>
A bordered yellow container with scrollable content that contains overscroll behavior within the element boundaries.
Conclusion
The overscroll-behavior property effectively disables pull-to-refresh on mobile browsers when set to none. Use contain for specific containers to prevent scroll chaining while preserving normal scrolling behavior.
Updated on: 2026-03-15T15:24:58+05:30
1K+ Views
Advertisements