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
Disabling Android's chrome pull-down-to-refresh feature with HTML.
The pull-down-to-refresh feature in Chrome for Android automatically refreshes the page when users pull down from the top. While this enhances user experience in most cases, it can interfere with web applications that have their own scrolling interactions or custom refresh mechanisms.
The Problem
When users interact with custom scrollable content, chat interfaces, or touch-based applications, the browser's pull-to-refresh can trigger unintentionally. This creates a poor user experience where the entire page refreshes when users only intended to scroll within a specific area.
Syntax
Following is the CSS syntax to disable the pull-down-to-refresh feature −
body {
overscroll-behavior-y: contain;
}
The overscroll-behavior-y property controls what happens when the user scrolls past the boundary of a scrolling area along the vertical axis.
Using overscroll-behavior-y Property
The overscroll-behavior-y property accepts the following values −
auto − Default behavior, allows pull-to-refresh and bounce effects
contain − Prevents scrolling from affecting parent elements but allows local effects
none − Disables all overscroll effects including pull-to-refresh
Example − Disabling Pull-to-Refresh
Following example demonstrates how to disable the pull-down-to-refresh feature −
<!DOCTYPE html>
<html>
<head>
<title>Disable Pull-to-Refresh</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
overscroll-behavior-y: contain;
}
.content {
height: 200vh;
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
padding: 20px;
}
.demo-box {
background: #4CAF50;
color: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Pull-to-Refresh Disabled</h1>
<div class="demo-box">
Try pulling down from the top of this page on Android Chrome.
The page will not refresh due to overscroll-behavior-y: contain.
</div>
<div class="content">
<p>This is a long scrollable content area.</p>
<p>Scroll down to see more content...</p>
<div style="margin-top: 1000px;">
<p>You've reached the bottom! Try pulling down from the top again.</p>
</div>
</div>
</body>
</html>
With overscroll-behavior-y: contain applied to the body, pulling down from the top will not trigger the browser's refresh action.
Applying to Specific Elements
You can also apply the overscroll behavior to specific scrollable containers instead of the entire page −
Example − Chat Interface
Following example shows how to prevent pull-to-refresh in a chat-like interface −
<!DOCTYPE html>
<html>
<head>
<title>Chat Interface - No Pull Refresh</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overscroll-behavior-y: contain;
}
.chat-container {
height: 400px;
border: 1px solid #ccc;
overflow-y: auto;
padding: 10px;
margin: 20px;
background: #f9f9f9;
}
.message {
background: #007bff;
color: white;
padding: 10px;
margin: 5px 0;
border-radius: 10px;
max-width: 80%;
}
.message.received {
background: #e9ecef;
color: #333;
margin-left: auto;
}
</style>
</head>
<body>
<h2 style="padding: 0 20px;">Chat Demo</h2>
<div class="chat-container">
<div class="message">Hello! How are you today?</div>
<div class="message received">I'm doing great, thanks for asking!</div>
<div class="message">That's wonderful to hear.</div>
<div class="message received">How about you?</div>
<div class="message">I'm having a productive day working on some code.</div>
<div class="message received">Nice! What are you building?</div>
<div class="message">A web application with custom scroll behavior.</div>
</div>
<p style="padding: 0 20px;">Try pulling down from the top - refresh is disabled!</p>
</body>
</html>
In this chat interface, users can scroll through messages without accidentally triggering a page refresh.
Alternative Values
For complete control over overscroll behavior, you can use overscroll-behavior-y: none −
Example − Complete Overscroll Disable
<!DOCTYPE html>
<html>
<head>
<title>Complete Overscroll Disable</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
overscroll-behavior-y: none;
}
.content {
height: 150vh;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
padding: 20px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Overscroll Behavior: None</h1>
<div class="content">
<h2>All overscroll effects disabled</h2>
<p>No pull-to-refresh, no bounce effects</p>
</div>
</body>
</html>
Using none completely disables all overscroll behaviors including visual bounce effects.
Browser Compatibility
The overscroll-behavior property is supported in modern browsers −
| Browser | Version Support |
|---|---|
| Chrome for Android | 63+ |
| Chrome Desktop | 63+ |
| Firefox | 59+ |
| Safari | 16.0+ |
| Edge | 18+ |
Conclusion
Use overscroll-behavior-y: contain on the body element to disable Android Chrome's pull-down-to-refresh feature. This prevents accidental page refreshes in web applications with custom scroll interactions while maintaining local bounce effects. For complete overscroll disabling, use overscroll-behavior-y: none.
529 Views
