overscroll-behavior-x

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-x CSS Eigenschaft legt das Verhalten des Browsers fest, wenn der horizontale Rand eines Scrollbereichs erreicht wird.

Für eine vollständige Erklärung siehe overscroll-behavior.

Syntax

css
/* Keyword values */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/* Global values */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

Die overscroll-behavior-x Eigenschaft wird als ein Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

Werte

auto

Das Standardverhalten bei Überlauf-Scrolling tritt wie gewohnt auf.

contain

Das Standardverhalten bei Überlauf-Scrolling (z.B. "Bounce"-Effekte) wird innerhalb des Elements beachtet, in dem dieser Wert gesetzt wird. Es erfolgt jedoch kein Scroll Chaining zu benachbarten Scrollbereichen; die darunterliegenden Elemente werden nicht scrollen. Der contain-Wert deaktiviert native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation.

none

Kein Scroll Chaining zu benachbarten Scrollbereichen tritt auf, und das Standardverhalten bei Ü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-x = 
  contain  |
  none     |
  auto

Beispiele

Verhindern, dass ein darunterliegendes Element horizontal scrollt

In unserem einfachen overscroll-behavior-x Beispiel (siehe auch Quellcode), haben wir zwei Block-Elemente, eines innerhalb des anderen. Das äußere Element hat eine große width eingestellt, sodass die Seite horizontal scrollen wird. Das innere Element hat eine kleine Breite (und height), sodass es bequem im Ansichtsfenster sitzt, aber sein Inhalt hat eine große width, damit es horizontal scrollt.

Standardmäßig, wenn das innere Element gescrollt wird und ein Scroll-Rand erreicht wird, beginnt die ganze Seite zu scrollen, was wahrscheinlich nicht gewollt ist. Um dies zu vermeiden, können Sie overscroll-behavior-x: contain auf das innere Element setzen:

css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch