数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚
法律使用 CSS 禁用移动浏览器中的下拉刷新功能
我们可以使用 CSS overscroll-behavior 属性来修改滚动网页边界区域的输出。我们还可以通过此方法在浏览器上禁用下拉刷新功能。
语法
CSS overscroll-behavior 属性的语法如下 −
Selector {
overscroll-behavior: /*value*/
}
Overscroll-behavior
以下示例说明了 CSS overscroll-behavior 属性。它设置了 Web 浏览器在滚动区域到达边界后将执行的操作。这里，我们设置了 div 的 overflow-behavior-y 以便在滚动区域的垂直边界到达后设置 Web 浏览器行为。contain 值是针对默认滚动行为设置的 −
div {
margin: 2%;
width: 500px;
height: 200px;
overflow-x: auto;
overscroll-behavior-y: contain;
background-color: plum;
}
示例
让我们看一个示例 −
<!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>
将 Overscroll Behavior 设置为 Body
若要将 overscroll behavior 设置为 body，我们使用了 overscroll-behavior 属性。CSS overscroll-behavior 属性设置了 Web 浏览器在滚动区域到达边界后将执行的操作 −
body {
overscroll-behavior: contain;
text-align: center;
}
示例
让我们看一个示例 −
<!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>
更新时间：2023 年 11 月 1 日
804 浏览次数
广告