overscroll-behavior-x

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

/* グローバル値 */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: unset;

構文

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

値

auto

スクロールの末端における既定の振る舞いが通常通りに発生します。

contain

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

none

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義

初期値auto
適用対象非置換ブロックレベル要素と非置換インラインブロック要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

overscroll-behavior-x = 
  contain  |
  none     |
  auto

例

背後にある要素が横にスクロールするのを防ぐ

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

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

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

仕様書

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-physical

ブラウザーの互換性

BCD tables only load in the browser

関連情報