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

構文

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

2つのキーワードでは、 overscroll-behavior のそれぞれ x 及び y 軸の値を指定します。値が1つだけ指定された場合は、 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;
}

仕様書

Microsoft Edge はバージョン18で overscroll-behavior に対応しておらず、 Microsoft 独自の標準外のプロパティ -ms-scroll-chaining: noneoverscroll-behavior: contain と似た動作をします。

Specifications

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

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 63Edge 完全対応 18Firefox 完全対応 59IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Edge Mobile 未対応 なしFirefox Android 完全対応 59Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

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