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> |