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 September 2022.
Die overscroll-behavior-y CSS Eigenschaft legt das Verhalten des Browsers fest, wenn der vertikale Rand 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 Eigenschaft overscroll-behavior-y wird als Schlüsselwort aus der unten stehenden Werteliste angegeben.
Werte
auto-
Das Standardverhalten für das Überlauf-Scrolling tritt wie gewohnt auf.
contain-
Das Standardverhalten für das Überlauf-Scrolling (z. B. "Bounce"-Effekte) wird innerhalb des Elements beobachtet, wo dieser Wert festgelegt ist. Es tritt jedoch kein Scroll Chaining in benachbarten Scrollbereichen auf; die zugrunde liegenden Elemente werden nicht gescrollt. Der Wert
containdeaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Swipe-Navigation. none-
Es tritt kein Scroll Chaining zu benachbarten Scrollbereichen auf und das Standardverhalten für das Überlauf-Scrolling 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 zugrunde liegendes Element vertikal scrollt
.messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } Siehe overscroll-behavior für ein vollständiges Beispiel und Erklärung.
Spezifikationen
| Specification |
|---|
| CSS Overscroll Behavior Module Level 1> # overscroll-behavior-longhands-physical> |