Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >overscroll-behavior

overscroll-behavior

overscroll-behavior: auto | contain | none (1–2 Werte: x y)

Scrollt ein Leser den Inhalt eines Dialogs, eines Menüs oder eines Chats und erreicht dessen Ende, beginnt der Browser, die Seite darunter zu scrollen. Mit contain hält das Scrollen am Rand des Elements an. An der Seite (html) kann der Wert none auch das Ziehen zum Aktualisieren und den Federeffekt am Ende ausschalten.

Werte

  • auto – nach Erreichen des Endes scrollt das Elternelement oder die Seite.
  • contain – das Scrollen geht nicht auf das Elternelement über; der Federeffekt am Ende des Elements bleibt.
  • none – geht nicht über, und es gibt weder Federeffekt noch Ziehen zum Aktualisieren.
  • contain none – zwei Werte: waagerecht, senkrecht; einzeln overscroll-behavior-x und -y.

Initialwert: auto. Vererbt: nein. Gilt für: Scroll-Container; für die Seite html.

Beispiele

Eine Nachrichtenliste mit eigenem Scrollen, die nach Erreichen ihres Endes die Seite nicht bewegt:

<div class="messages">
  <p>Nachricht 1</p>
  <p>Nachricht 2</p>
  <p>Nachricht 3</p>
  <p>Nachricht 4</p>
  <p>Nachricht 5</p>
</div>

.messages {
  max-width: 240px;
  height: 100px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #90a4ae;
}
.messages p { margin: 4px 8px; }
Ergebnis

Nachricht 1

Nachricht 2

Nachricht 3

Nachricht 4

Nachricht 5

Eine Webanwendung ohne Ziehen zum Aktualisieren auf dem Handy:

<main class="app">…</main>

html { overscroll-behavior-y: none; }

Das Ergebnis: Ziehen mit dem Finger nach unten am Anfang der Seite aktualisiert sie nicht, und die Seite federt an ihren Enden nicht.

Worauf Sie achten sollten

  • Für die Seite gehört es an html, an body wirkt es nicht.
  • Es betrifft nur das Scrollen innerhalb des Elements: Läuft der Inhalt des Elements nicht über, scrollt das Mausrad sofort die Seite.
  • Unterstützung der Werte auto, contain und none: Chrome ab 63, Firefox ab 59, Safari ab 16.

Browserunterstützung

Noch nicht Baseline: funktioniert noch nicht in allen gängigen Browsern (ohne Präfix). Ab Version: Chrome 63 (vollständig seit 144), Firefox 59 (vollständig seit 150), Safari 16 (teilweise). Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
overflow
scroll-snap-type
scroll-behavior
touch-action