overscroll-behavior-y
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.
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: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
overscroll-behavior-y プロパティは、次の値の一覧から選択した一つのキーワードで指定します。
値
公式定義
| 初期値 | 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 |
ブラウザーの互換性
Loading…