overscroll-behavior-x

CSS の overscroll-behavior-x プロパティは、スクロール領域の水平方向の境界に達したときのブラウザーの動作を設定します。

メモ: 全体的な説明は overscroll-behavior を参照してください。

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

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

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

構文

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

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

形式文法

contain | none | auto

簡単な overscroll-behavior-x の例 (ソースコードも参照) の中で、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い width を持っているので、ページは水平にスクロールします。内側のボックスは width (と height) が小さく、ビューポート内にきちんと収まりますが、内容は広い width を持ち、水平にスクロールします。

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始め、おそらく望ましくない動きです、。これを防ぐために、内側のボックスに overscroll-behavior-x: contain を設定することができます。

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 63Edge 部分対応 18
補足
部分対応 18
補足
補足 Currently the none value incorrectly behaves as contain (allowing for the elastic bounce effect).
Firefox 完全対応 59IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Edge Mobile 未対応 なしFirefox Android 完全対応 59Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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