CSS overscroll-behavior Eigenschaft

Definition und Verwendung

overscroll-behavior Die Eigenschaft wird verwendet, um das Scrollen der Kette (scroll chaining) oder die übermäßigeScroll-Rückmeldung (overscroll affordance) des Elements auszuschalten, wenn versucht wird, über die Grenzen des Scrollens hinauszuscrollen.

Scroll-Chain: Wenn eine übermäßigeScrollbewegung in einem Element durchgeführt wird, führt dies zu einer Scrollbewegung des übergeordneten Elements. Dies ist das Standardverhalten.

Feedback für übermäßiges Scrollen: Die Rückmeldung, die dem Benutzer gegeben wird, wenn versucht wird, über die Grenzen des Scrollens hinauszuscrollen. Zum Beispiel wird bei Versuchen, über die Oberseite der Seite auf einem mobilen Gerät hinauszuscrollen, in der Regel visuelle Rückmeldung angezeigt und die Seite neu geladen.

overscroll-behavior Die Eigenschaft ist eine Abkürzung für die folgenden Eigenschaften:

overscroll-behavior Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn die overscroll-behavior-Eigenschaft zwei Werte hat:

overscroll-behavior: none contain;
  • x-Richtung: Keine Überrollverhalten
  • y-Richtung: Keine Scrollkette, aber Überrollfeedback erlaubt

Wenn die overscroll-behavior-Eigenschaft einen Wert hat:

overscroll-behavior: contain;
  • x- und y-Richtung: Keine Scrollkette, aber Überrollfeedback erlaubt

Beispiel

Beispiel 1

Schließen Sie die Scrollkette des rollbaren <div>-Elements ab：

#yellowDiv {
  overscroll-behavior: contain;
}

Versuchen Sie es selbst

Beispiel 2: Double-Wert-Syntax:

Setzen Sie overscroll-behavior Eigenschaftswert auf auto none允许 x 方向的滚动链和过度滚动反馈，但 y 方向不允许：

#pinkDiv {
  overscroll-behavior: auto none;
}

Versuchen Sie es selbst

CSS-Syntax

overscroll-behavior: auto|contain|none|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Erlaubt Scrollketten und Überrollfeedback-Eigenschaften. Standardwert.
contain Erlaubt Überrollfeedback-Eigenschaften, aber keine Scrollketten.
none Erlaubt keine Überrollfeedback oder Scrollketteneigenschaften.
initial Setzen Sie diesen Wert auf seinen Standardwert. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: auto
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.overscrollBehavior="none"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* In Microsoft Edge wird der Wert 'none' als 'contain' behandelt, was falsch ist.

Verwandte Seiten

Referenz:CSS overscroll-behavior-x Eigenschaft

Referenz:CSS overscroll-behavior-y Eigenschaft

Referenz:CSS scroll-behavior Eigenschaft

Referenz:CSS scroll-margin Eigenschaft

Referenz:CSS scroll-padding-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft