`overscroll-behavior-x` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die overscroll-behavior-x CSS Eigenschaft legt das Verhalten des Browsers fest, wenn die horizontale Begrenzung eines scrollbaren Bereichs erreicht wird.

Siehe overscroll-behavior für eine vollständige Erklärung.

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;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

auto: Das Standardverhalten bei Überlauf beim Scrollen tritt wie gewohnt auf.
contain: Das Standardverhalten bei Überlauf beim Scrollen (z. B. "Bounce"-Effekte) wird innerhalb des Elements, bei dem dieser Wert gesetzt ist, beobachtet. Dennoch tritt kein Scroll Chaining in benachbarten scrollbaren Bereichen auf; die darunterliegenden Elemente scrollen nicht. Der Wert contain deaktiviert die native Browser-Navigation, einschließlich der vertikalen Pull-to-Refresh-Geste und der horizontalen Wischnavigation.
none: Es erfolgt kein Scroll Chaining zu benachbarten scrollbaren Bereichen, und das Standardverhalten bei Überlauf beim Scrollen wird verhindert.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	nicht ersetzte Blocklevel Elemente und nicht ersetzte Inlineblock Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

overscroll-behavior-x = 
  contain  |
  none     |
  auto     |
  chain

In unserem overscroll-behavior-x Beispiel (sehen Sie auch den Quellcode), haben wir zwei Block-Elementkästen, einen im anderen. Der äußere Kasten hat eine große width gesetzt, sodass die Seite horizontal scrollt. Der innere Kasten hat eine kleine Breite (und height) eingestellt, sodass er bequem im Ansichtsfenster sitzt, aber sein Inhalt hat eine große width, sodass er horizontal scrollt.

Standardmäßig, wenn der innere Kasten gescrollt wird und eine Scrollgrenze erreicht ist, fängt die ganze Seite an zu scrollen, was wahrscheinlich nicht gewünscht ist. Um dies zu vermeiden, können Sie overscroll-behavior-x: contain auf den inneren Kasten setzen:

css

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