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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overscroll-behavior-x
auto
contain
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch