overscroll-behavior-y CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2022 browserübergreifend verfügbar.
Die overscroll-behavior-y-Eigenschaft CSS legt fest, wie sich der Browser verhält, wenn die vertikale Grenze eines Scrollbereichs erreicht wird.
Siehe overscroll-behavior für eine vollständige Erklärung.
Syntax
/* Keyword values */
overscroll-behavior-y: auto; /* default */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
/* Global values */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
Die overscroll-behavior-y-Eigenschaft wird als Schlüsselwort aus der untenstehenden Liste von Werten angegeben.
Werte
auto-
Das standardmäßige Überlaufverhalten beim Scrollen tritt wie gewohnt auf.
contain-
Das standardmäßige Überlaufverhalten beim Scrollen (z.B. "Bounce"-Effekte) tritt innerhalb des Elements auf, bei dem dieser Wert festgelegt ist. Es tritt jedoch kein Scroll-Chaining in benachbarten Scrollbereichen auf; die darunterliegenden Elemente werden nicht scrollen. Der
contain-Wert deaktiviert die native Browsernavigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation. none-
Es tritt kein Scroll-Chaining in benachbarten Scrollbereichen auf, und das standardmäßige Überlaufverhalten beim Scrollen wird verhindert.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | nicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overscroll-behavior-y =
contain |
none |
auto
Beispiele
Verhindern, dass ein darunterliegendes Element vertikal scrollt
.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
Siehe overscroll-behavior für ein vollständiges Beispiel und eine Erklärung.
Spezifikationen
| Spezifikation |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |