CSS overscroll-behavior-x 属性

定義と使用法

overscroll-behavior-x この属性は、x方向でスクロールの境界を超えると、要素のスクロールチェーンを閉じるかオーバースクロールフィードバックを許可するために使用されます。

注意：x方向でoverscroll-behaviorをトリガーするには、トラッキングパッドやタッチスクリーンでスライド手势を使用する必要があるかもしれません。

スクロールチェーンは、要素上でオーバースクロールが発生すると、親要素のスクロール行為が発生することを指します。これはデフォルトの行為です。

オーバースクロールフィードバックは、ユーザーがスクロールの境界を超えると与えられるフィードバックです。例えば、モバイルデバイスでは、ページのトップを超えてスクロールしようとすると、ページのリフレッシュに伴う視覚的なフィードバックが通常伴います。

x方向でスクロール可能な<div>要素のスクロールチェーンを閉じます：

#yellowDiv {
  overscroll-behavior-x: contain;
}

overscroll-behavior-x: auto|contain|none|initial|inherit;

値	説明
auto	スクロールチェーンとオーバースクロールフィードバック行為を許可します。デフォルト値。
contain	オーバースクロールフィードバック行為を許可しますが、スクロールチェーンを許可しません。
none	オーバースクロールフィードバックやスクロールチェーンの行為を許可しません。
initial	この属性をデフォルト値に設定します。参照してください： initial。
inherit	親要素からこの属性を継承します。参照してください： inherit。

デフォルト値：	auto
継承性：	いいえ
アニメーション作成：	サポートされていません。参照してください：アニメーション関連属性。
バージョン：	CSS3
JavaScript文法：	object.style.overscrollBehaviorX="none"

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示します。

Chrome	Edge	Firefox	Safari	Opera
63.0	18.0 *	59.0	16.0	50.0

* Microsoft Edgeでは、属性値noneがcontainとして評価されるのは正しくありません。