CSS overscroll-behavior-x Eigenschaft

Definition und Verwendung

overscroll-behavior-x Diese Eigenschaft wird verwendet, um die Scrollkettengeschichten oder das Überrollungsfeedback des Elements abzuschalten, wenn versucht wird, über die Grenzen des Rollbereichs zu scrollen.

Beachten Sie:Um overscroll-behavior in der X-Richtung auszulösen, müssen Sie möglicherweise auf dem Trackpad oder dem Touchscreen eine Fingergeste verwenden.

ScrollkettengeschichteBezeichnet das Überrollen eines Elements, das dasScrollverhalten des übergeordneten Elements verursacht. Dies ist das Standardverhalten.

ÜberrollenFeedback ist die Rückmeldung, die dem Benutzer gegeben wird, wenn er versucht, über die Grenzen des Rollbereichs zu scrollen. Zum Beispiel wird auf mobilen Geräten oft ein visuelles Feedback wie ein Neuladen der Seite mit dem Verschieben über den oberen Rand der Seite gegeben.

Beispiel

Schließen Sie die Scrollkettengeschichten des rollbaren <div>-Elements in der X-Richtung ab:

#yellowDiv {
  overscroll-behavior-x: contain;
}

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Erlaubt Scrollkettengeschichten und Überrollungsfeedback-Geschichten. Standardwert.
contain Erlaubt Überrollungsfeedback-Geschichten, aber keine Scrollkettengeschichten.
none Erlaubt keine Überrollungsfeedback oder Scrollkettengeschichten.
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.overscrollBehaviorX="none"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionen der Browser dar, die die Eigenschaft vollständig unterstützen.

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.

相关页面

Referenz:CSS overscroll-behavior Eigenschaft

Referenz:CSS overscroll-behavior-block Eigenschaft

Referenz:CSS overscroll-behavior-inline 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