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

CSSのoverscroll-behaviorプロパティでモバイルブラウザのプルツーリフレッシュを無効化する方法

Webページをスクロールして境界領域に達したときの挙動は、CSSの overscroll-behavior プロパティを使うことで制御できます。このプロパティを活用すると、モバイルブラウザ特有の「プルツーリフレッシュ（画面を下に引っ張って更新する機能）」や、スクロール連鎖（スクロールチェーン）を無効にすることが可能です。

overscroll-behavior プロパティの基本的な構文は以下のとおりです。

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

主な値としては、ブラウザ既定の挙動を示す auto、隣接するスクロール領域へのスクロール連鎖を防ぐ contain、オーバースクロール効果そのものを完全に無効化する none の3つがあります。プルツーリフレッシュを防ぎたい場合は、contain または none を指定します。

サンプルコード1：要素に overscroll-behavior-y を指定する例

次の例では、横方向にスクロール可能な div 要素に対して overscroll-behavior-y: contain; を指定し、縦方向のオーバースクロールが親要素へ伝播しないようにしています。

<!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 の使用例</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のoverscroll-behaviorプロパティでモバイルブラウザのプルツーリフレッシュを無効化する方法

サンプルコード2：body 要素に overscroll-behavior を指定する例

続いて、ページ全体のスクロールを担う body 要素に直接 overscroll-behavior: contain; を指定する例を見てみましょう。これにより、ページ端でのオーバースクロールによるプルツーリフレッシュが発生しなくなります。

<!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>body 要素への overscroll-behavior の設定</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のoverscroll-behaviorプロパティでモバイルブラウザのプルツーリフレッシュを無効化する方法

一方、モバイルブラウザで表示すると、ページを下に引っ張っても更新動作（プルツーリフレッシュ）が起こらなくなっていることが確認できます。

CSSのoverscroll-behaviorプロパティでモバイルブラウザのプルツーリフレッシュを無効化する方法

まとめ

CSSの overscroll-behavior プロパティを使えば、JavaScriptに頼らずCSSだけでモバイルブラウザのプルツーリフレッシュやスクロール連鎖を制御できます。特にシングルページアプリケーションやゲーム的なUIを持つサイトでは、意図しない更新動作を防ぐために contain や none の指定が有効です。主要なモダンブラウザでサポートされているため、積極的に活用しましょう。

  1. CSSでツールチップを作る方法｜サンプルコード付きで解説

    CSSツールチップとは？ ツールチップ（Tooltip）は、要素に追加情報を設定するためのUIパーツです。訪問者がマウスポインターを要素の上に重ねると、Webページ上に補足説明がポップアップ表示されます。JavaScriptに頼らず、CSSだけでも手軽に実装できるのが大きな魅力です。 以下は、CSSのみを使用してツールチップを構築するサンプルコードです。 サンプルコード <!DOCTYPE html> <html> <style> body {    font-family: "Segoe UI", Tahoma, G

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ