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
/* 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
Initialer Wert | auto |
---|---|
Anwendbar auf | nicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
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:
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