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 オーバースクロール動作モジュール