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

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

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