overscroll-behavior-y

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die overscroll-behavior-y-Eigenschaft CSS 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

css
/* 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 angegeben, das aus der folgenden Liste von Werten ausgewählt wird.

Werte

auto

Das Standardverhalten bei Bildlaufüberlauf tritt wie gewohnt auf.

contain

Das Standardverhalten bei Bildlaufüberlauf (z. B. "Bounce"-Effekte) wird innerhalb des Elements beachtet, in dem dieser Wert festgelegt ist. Allerdings tritt keine Scroll-Verkettung bei benachbarten Scrollbereichen auf; die darunterliegenden Elemente werden nicht scrollen. Der Wert contain deaktiviert die native Browser-Navigation, einschließlich der vertikalen "Pull-to-Refresh"-Geste und der horizontalen Wischnavigation.

none

Es tritt keine Scroll-Verkettung zu benachbarten Scrollbereichen auf, und das Standardverhalten bei Bildlaufüberlauf wird verhindert.

Formale Definition

Anfangswertauto
Anwendbar aufnicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

overscroll-behavior-y = 
  contain  |
  none     |
  auto

Beispiele

Verhindern, dass ein darunterliegendes Element vertikal scrollt

css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

Siehe overscroll-behavior für ein vollständiges Beispiel und eine Erklärung.

Spezifikationen

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-physical

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch