overscroll-behavior-y

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

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

構文

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

auto

スクロールの末端における既定の振る舞いが通常通りに発生します。

contain

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

none

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義

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

形式文法

overscroll-behavior-y = 
contain |
none |
auto

背後にある要素の縦スクロールの抑止

css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

完全な例と説明については、 overscroll-behavior を参照してください。

仕様書

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-physical

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overscroll-behavior-y
auto
contain
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報