overscroll-behavior-block

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

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

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

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

構文

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

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

公式定義

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

形式文法

contain | none | auto

ブロック方向のオーバースクロールの抑止

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い height を持っているので、ページは垂直にスクロールします。内側のボックスは width (と height) が小さく、ビューポート内にきちんと収まりますが、内容は広い height を持つため、垂直にスクロールします。

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

HTML

<main>
  <div>
    <div>
      <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
    </div>
  </div>
</main>

CSS

main {
  height: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}

p {
  padding: 10px;
  background-color: rgba(255,0,0,0.5);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

結果

仕様書

仕様書 状態 備考
CSS Overscroll Behavior Module Level 1
overscroll-behavior-block の定義
草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
overscroll-behavior-blockChrome 完全対応 77Edge 完全対応 79Firefox 完全対応 73IE 未対応 なしOpera 完全対応 64Safari 未対応 なし
補足
未対応 なし
補足
補足 See bug 176454.
WebView Android 完全対応 77Chrome Android 完全対応 77Firefox Android 未対応 なしOpera Android 完全対応 55Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 See bug 176454.
Samsung Internet Android 完全対応 12.0

凡例

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

関連情報