資料結構
網路
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 瀏覽次數
廣告