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 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 Eigenschaft overscroll-behavior-y wird als ein Schlüsselwort aus der untenstehenden Liste von Werten angegeben.
Werte
auto-
Das Standardverhalten für Überlauf beim Scrollen tritt wie gewohnt auf.
contain-
Das Standardverhalten für Überlauf beim Scrollen (z.B. "Bounce"-Effekte) wird innerhalb des Elements beobachtet, in dem dieser Wert festgelegt ist. Es tritt jedoch keine Scroll-Verkettung in benachbarten Scroll-Bereichen auf; die darunter liegenden Elemente werden nicht scrollen. Der Wert
containdeaktiviert die native Browser-Navigation, einschließlich der vertikalen "Pull-to-refresh"-Geste und der horizontalen Wischnavigation. none-
Es tritt keine Scroll-Verkettung zu benachbarten Scroll-Bereichen auf, und das Standardverhalten für Überlauf 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 darunter 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 |
Browser-Kompatibilität
Loading…