overscroll-behavior-x

CSS の overscroll-behavior-X プロパティは、 x 軸方向におけるブラウザーのスクロールが末端に来たときの振る舞い — スクロール範囲の末端に達したときに起こること — を制御することができます。

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

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

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

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

構文

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 の定義
不明  

ブラウザーの対応

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

関連情報

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

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