CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したモバイルブラウザでのプルツーリフレッシュ機能の無効化

CSS overscrollbehaviorプロパティを使用して、Webページの境界領域をスクロールする出力を変更できます。これにより、ブラウザでプルトゥリフレッシュを無効にできます。

CSSoverscroll-behaviorプロパティの構文は次のとおりです-

Selector {
   overscroll-behavior: /*value*/
}

例

次の例は、CSSのoverscroll-behaviorプロパティを示しています。

<!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>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>

出力

これにより、次の結果が生成されます-

CSSを使用したモバイルブラウザでのプルツーリフレッシュ機能の無効化

例

<!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>

出力

これにより、次の結果が生成されます-

CSSを使用したモバイルブラウザでのプルツーリフレッシュ機能の無効化

以下はモバイルブラウザでの出力です-

CSSを使用したモバイルブラウザでのプルツーリフレッシュ機能の無効化


  1. CSSを使用したツールチップの構築

    ツールチップは、追加情報を設定するために使用されます。これは、訪問者がマウスポインタを要素の上に移動すると、Webページに表示されます。 以下は、CSSを使用してツールチップを構築するためのコードです- 例 <!DOCTYPE html> <html> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    text-align: center; } .toolTip {   &

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig