overscroll-behavior

ジャンプ先:
  1. 構文
  2. 例
  3. 仕様書
  4. ブラウザーの対応
  5. 関連情報

CSS の overscroll-behavior プロパティは overscroll-behavior-x 及び overscroll-behavior-y の一括指定プロパティであり、ブラウザーのスクロールが末端に来たときの振る舞い — スクロール範囲の末端に達したときに起こること — を制御することができます。

/* キーワード値 */
overscroll-behavior: auto; /* 既定 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 二つの値 */
overscroll-behavior: auto contain;

/* グローバル値 */
overflow: inherit;
overflow: initial;
overflow: unset;

既定では、モバイルブラウザーは「跳ね返る」効果を見せたり、ページの最上部又は最下部 (又はその他のスクロール領域) に達したときにページを更新したりする機能を提供する傾向があります。内容がスクロールするページの上に、内容がスクロールするダイアログが表示されている時、ダイアログボックスのスクロール境界に達したときに、下のページがスクロールし始めるという動きをするのに気が付いたかもしれません。 — これはスクロールチェーンと呼ばれています。

場合によっては、この動きが望ましくないことがあります。 overscroll-behavior を使用すると、望ましくないスクロールチェーンを抑止したり、ブラウザー版の Facebook や Twitter アプリなどに見られる「引いて更新」の類の動きを実現したりすることができます。

初期値auto
適用対象非置換ブロックレベル要素と非置換インラインブロック要素
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

overscroll-behavior プロパティは、次の値の一覧のうち１つ又は２つのキーワードで指定します。

２つのキーワードでは、 overscroll-behavior のそれぞれ x 及び y 軸の値を指定します。値が１つだけ指定された場合は、 x 及び y が同じ値とみなされます。

値

auto
スクロールの末端における既定の振る舞いが通常通りに発生します。
contain
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
none
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

形式文法

[ contain | none | auto ]{1,2}

例

overscroll-behavior の例 (ソースコードはこちら) は、全画面で擬似連絡先の一覧を、ダイアログボックスでチャットウィンドウを表示します。

どちらの領域もスクロールします。ふつう、チャットウィンドウをスクロール境界に当たるまでスクロールすると、下の連絡先ウィンドウもスクロールを始めます。これは望ましくないことです。これは、次のようにチャットウィンドウに overscroll-behavior-y (overscroll-behavior でも可) を使用することで抑止することができます。

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

連絡先が冒頭又は末端までスクロールしたときの標準のスクロール末端効果を抑止したいかもしれません (例えば Android 版 Chrome は、冒頭の境界を超えてスクロールしようとするとページを再読み込みします)。これは <body> 要素に overscroll-behavior: none を設定することで抑止することができます。

body {
  margin: 0;
  overscroll-behavior: none;
}

仕様書

CSSWG が草稿を発行するまで、この仕様は WICG Github リポジトリのみで見られます。

仕様書 状態 備考
Unknown
overscroll-behavior の定義		 不明  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応63 なし59 なし50 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応6363 なし5950 なし なし

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09
最終更新者: mfuji09,