CSS overscroll-behavior 属性
- 前のページ overflow-y
- 次のページ overscroll-behavior-block
定義と使用方法
overscroll-behavior 属性は、スクロールの境界を超えた試みに対して要素のスクロールチェーン（scroll chaining）またはオーバースクロールフィードバック（overscroll affordance）を無効にするために使用されます。
スクロールチェーン：ある要素に対してオーバースクロールが行われた場合、親要素のスクロール動作に影響を与えます。これはデフォルトの動作です。
オーバースクロールフィードバック：スクロールの境界を超えた試みに対してユーザーに提供されるフィードバック。例えば、モバイルデバイスでページのトップを超えてスクロールしようとすると、通常は視覚的なフィードバックが表示されページがリフレッシュされます。
overscroll-behavior この属性は以下の属性の短縮形です：
overscroll-behavior 属性の値は以下の方法で設定できます：
overscroll-behavior属性が2つの値を持っている場合：
overscroll-behavior: none contain;
- x方向：オーバースクロールの行為がありません。
- y方向：スクロールチェーンがなく、オーバースクロールのフィードバックを許可します。
overscroll-behavior属性が1つの値を持っている場合：
overscroll-behavior: contain;
- xおよびy方向：スクロールチェーンがなく、オーバースクロールのフィードバックを許可します。
インスタンス
例1
スクロール可能な<div>要素のスクロールチェーンをオフにする：
#yellowDiv {
overscroll-behavior: contain;
}
双値構文：
次の例： overscroll-behavior 属性値が設定されています： auto none、x方向のスクロールチェーンとオーバースクロールのフィードバックを許可しますが、y方向は許可しません：
#pinkDiv {
overscroll-behavior: auto none;
}
CSSの構文
overscroll-behavior: auto|contain|none|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| auto | スクロールチェーンとオーバースクロールのフィードバック行為を許可します。デフォルト値。 |
| contain | オーバースクロールのフィードバック行為を許可しますが、スクロールチェーンは許可しません。 |
| none | オーバースクロールのフィードバックやスクロールチェーンの行為を許可しません。 |
| initial | この属性をデフォルト値に設定します。参照してください： initial。 |
| inherit | この属性は、親要素からこの属性を継承します。参照してください： inherit。 |
技術的詳細
| デフォルト値： | auto |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートしていません。参照してください：アニメーション関連の属性。 |
| バージョン： | CSS3 |
| JavaScriptの構文： | object.style.overscrollBehavior="none" |
ブラウザのサポート
テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* Microsoft Edgeで、属性値'none'が'contain'として処理されるのは不適切です。
関連ページ
参照：CSS overscroll-behavior-x 属性
- 前のページ overflow-y
- 次のページ overscroll-behavior-block
