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 プロパティは、次の値の一覧のうち１つまたは２つのキーワードで指定します。
２つのキーワードでは、 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 リポジトリのみで見られます。
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Overscroll Behavior Module Level 1 overscroll-behavior の定義 |
ドラフト |
ブラウザーの対応
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
overscroll-behavior | Chrome 完全対応 63 | Edge
部分対応
18
| Firefox 完全対応 59 | IE 未対応 なし | Opera 完全対応 50 | Safari 未対応 なし | WebView Android 完全対応 63 | Chrome Android 完全対応 63 | Edge Mobile 未対応 なし | Firefox Android 完全対応 59 | Opera Android 完全対応 50 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 部分対応
- 部分対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。