`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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft overscroll-behavior-x legt fest, wie sich der Browser verhält, wenn die horizontale Grenze eines scrollbaren Bereichs erreicht wird.

Eine ausführliche Erklärung finden Sie unter overscroll-behavior.

Syntax

css

/* Keyword values */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: chain;
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

Für diese Eigenschaft wird einer der folgenden Schlüsselwortwerte angegeben:

auto: Ermöglicht das Standardverhalten an einer Scrollgrenze. Das Scrollen kann in einem anderen Scrollcontainer fortgesetzt werden.
chain: Ermöglicht das Scrollen über den Scrollcontainer hinaus, verhindert aber Abpralleffekte beim Overscrolling.
contain: Verhindert das Scrollen über den Scrollcontainer hinaus. Abpralleffekte können weiterhin auftreten.
none: Verhindert das Scrollen über den Scrollcontainer hinaus sowie Abpralleffekte beim Overscrolling.

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 Beispiel zu overscroll-behavior-x (siehe auch den Quellcode) befinden sich zwei Block-Boxen ineinander. Für die äußere Box ist eine große width festgelegt, sodass die Seite horizontal gescrollt werden kann. Für die innere Box sind eine geringe Breite (und height) festgelegt, sodass sie problemlos in den Viewport passt. Ihr Inhalt hat jedoch eine große width, sodass die innere Box horizontal gescrollt werden kann.

Wenn die innere Box gescrollt wird und eine Scrollgrenze erreicht, beginnt standardmäßig die gesamte Seite zu scrollen. Das ist wahrscheinlich nicht erwünscht. Um dies zu verhindern, können Sie für die innere Box overscroll-behavior-x: contain festlegen:

css

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