Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS
We can change the output of scrolling a webpage’s boundary area using the CSS overscroll-behavior property. Through this, we can disable Pull-to-Refresh on browsers.
Syntax
The syntax of CSS overscroll-behavior property is as follows −
Selector {
overscroll-behavior: /*value*/
}
The Overscroll-behavior
The following example illustrate CSS overscroll-behavior property. It sets what a web browser does after reaching the boundary of a scrolling area. Here, we have set the overflow-behavior-y for the div to set the web browser's behavior when the vertical boundary of a scrolling area is reached. The value contain is set for a default scroll behaviour −
div {
margin: 2%;
width: 500px;
height: 200px;
overflow-x: auto;
overscroll-behavior-y: contain;
background-color: plum;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
width: 500px;
height: 200px;
overflow-x: auto;
overscroll-behavior-y: contain;
background-color: plum;
}
p {
font-size: 1.5em;
}
</style>
</head>
<body>
<h2>overscroll-behavior example</h2>
<div>
<p>Cricket, initially said to be England’s national summer game, has gained immense popularity worldwide. Such is the popularity that it is not only restricted to the professional field, rather people of all ages and gender can be seen playing cricket in their streets and backyards. This sport requires complete physical fitness and athleticism to play. The sport is played between two teams of 11 players each.</p>
</div>
<p>Cricket is played outdoors on a ground. The objective of the game is that a team should score more runs than the opponent team. It is all about attempting to score more runs, while restricting the score and dismissing the batsmen of the opponent team. Further in the document, one can closely understand the game, its popular terms and rules.</p>
</body>
</html>
Set Overscroll Behavior to Body
To set the overscroll behaviour to body, we have used the overscroll-behavior property. CSS overscroll-behavior property sets what a web browser does after reaching the boundary of a scrolling area −
body {
overscroll-behavior: contain;
text-align: center;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
overscroll-behavior: contain;
text-align: center;
}
div {
margin: 2%;
width: 450px;
height: 180px;
overflow-x: auto;
background-color: khaki;
}
p {
font-size: 1.3em;
}
</style>
</head>
<body>
<h2>setting overscroll behavior to body</h2>
<div>
<p>Pellentesque id velit non metus lacinia viverra ac congue enim. Morbi lacinia, erat nec cursus semper, arcu est scelerisque mi, eget hendrerit risus tellus ut lacus. Nunc dapibus risus quis magna posuere, ac malesuada odio ornare. Aliquam commodo dolor ipsum, at finibus libero laoreet non. Etiam mollis placerat aliquam. Maecenas gravida congue dui non hendrerit. Suspendisse varius eros id purus facilisis, sit amet sollicitudin sapien dictum.</p>
</div>
<p>Vestibulum ultricies diam sit amet laoreet sollicitudin. Nulla facilisis porttitor eros non sagittis. Donec rutrum a erat vitae interdum. Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida. Proin ut diam eros. Donec hendrerit euismod dui ac facilisis. Duis sodales urna dui, vitae imperdiet augue dictum tristique. Vivamus a risus enim. Donec fermentum iaculis rutrum. Nullam quis quam purus. Suspendisse potenti. Phasellus scelerisque scelerisque metus eu tristique. Nulla vitae augue non felis finibus aliquet. In ipsum elit, egestas ut arcu nec, commodo vehicula sapien. Suspendisse potenti.</p>
</body>
</html>
618 Views
To Continue Learning Please Login