Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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

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

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 zugrunde liegendes Element vertikal scrollt

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

Siehe auch