overscroll-behavior-x

構文

/* キーワード値 */ overscroll-behavior-x: auto; /* 既定値 */ overscroll-behavior-x: contain; overscroll-behavior-x: none; /* グローバル値 */ overscroll-behavior-x: inherit; overscroll-behavior-x: initial; overscroll-behavior-x: revert; overscroll-behavior-x: revert-layer; overscroll-behavior-x: unset; 

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

値

auto

既定のスクロールオーバーフロー動作が、通常通り発生します。

contain

この値が設定された要素内では、既定のスクロールオーバーフロー動作（「跳ね返り」効果など）が見られます。ただし、隣接するスクロール領域でのスクロール連鎖は発生せず、背後に配置された要素はスクロールしません。 contain の値では、垂直方向の引いて更新のジェスチャーや、水平方向のスワイプ操作を含む、ブラウザーのネイティブナビゲーションが無効になります。

none

隣接するスクロール領域へのスクロールの連鎖は発生せず、既定のスクロールオーバーフロー動作が抑止されます。

公式定義

形式文法

overscroll-behavior-x = 
 contain |
 none |
 auto 

例

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

overscroll-behavior-x の例（ソースコードも参照）の中で、一方がもう一方の中にある 2 つのブロックレベルボックスがあります。外側のボックスは広い 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; } 

仕様書

ブラウザーの互換性

関連情報

• overscroll-behavior
• overscroll-behavior-y
• overscroll-behavior-inline
• overscroll-behavior-block
• CSS オーバースクロール動作モジュール