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 の定義 |
不明 |
ブラウザーの対応
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 63 | なし | 59 | なし | 50 | ? |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 63 | 63 | なし | 59 | 50 | ? | なし |