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

ブラウザーの互換性

BCD tables only load in the browser

関連情報