overscroll-behavior-block
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
overscroll-behavior-block は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。
全体的な説明は overscroll-behavior を参照してください。
css
/* キーワード値 */ overscroll-behavior-block: auto; /* 既定値 */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* グローバル値 */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: revert; overscroll-behavior-block: revert-layer; overscroll-behavior-block: unset; 構文
overscroll-behavior-block プロパティは、次の値の一覧のうち一つのキーワードで指定します。
値
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
例
ブロック方向のオーバースクロールの抑止
このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い height を持っているので、ページは垂直にスクロールします。内側のボックスは width (と height) が小さく、ビューポート内にきちんと収まりますが、内容は広い height を持つため、垂直にスクロールします。
既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-block: contain を設定しました。
HTML
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
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; } 結果
仕様書
| Specification |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical |
