overscroll-behavior-y
Baseline 2022Newly 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 |
---|---|
適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
背後にある要素の縦スクロールの抑止
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- スクロールを制御する: 引いて更新や末端の効果のカスタマイズ
- The mapped logical properties:
overscroll-behavior-inline
,overscroll-behavior-block