Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >overscroll-behavior

overscroll-behavior

overscroll-behavior: auto | contain | none (1–2 wartości: x y)

Gdy czytelnik przewija treść okna dialogowego, menu lub czatu i dojdzie do jej końca, przeglądarka zaczyna przewijać stronę pod spodem. Z contain przewijanie zatrzymuje się na krawędzi elementu. Na stronie (html) wartość none może też wyłączyć przeciąganie w celu odświeżenia i efekt sprężyny na końcu.

Wartości

  • auto – po dojściu do końca przewija się rodzic lub strona.
  • contain – przewijanie nie przechodzi na rodzica; efekt sprężyny na końcu elementu zostaje.
  • none – nie przechodzi i nie ma ani efektu sprężyny, ani przeciągania w celu odświeżenia.
  • contain none – dwie wartości: poziomo, pionowo; osobno overscroll-behavior-x i -y.

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: kontenerów przewijania; dla strony html.

Przykłady

Lista wiadomości z własnym przewijaniem, która po dojściu do końca nie rusza strony:

<div class="messages">
  <p>Wiadomość 1</p>
  <p>Wiadomość 2</p>
  <p>Wiadomość 3</p>
  <p>Wiadomość 4</p>
  <p>Wiadomość 5</p>
</div>

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

Wiadomość 1

Wiadomość 2

Wiadomość 3

Wiadomość 4

Wiadomość 5

Aplikacja internetowa bez przeciągania w celu odświeżenia na telefonie:

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

html { overscroll-behavior-y: none; }

Wynik: przeciągnięcie palcem w dół na początku strony jej nie odświeża, a strona nie odbija się sprężyście na swoich końcach.

Na co uważać

  • Dla strony należy do html, na body nie działa.
  • Dotyczy tylko przewijania wewnątrz elementu: jeśli treść elementu się nie przelewa, kółko myszy od razu przewija stronę.
  • Obsługa wartości auto, contain i none: Chrome od 63, Firefox od 59, Safari od 16.

Obsługa w przeglądarkach

Jeszcze nie Baseline: nie działa jeszcze we wszystkich popularnych przeglądarkach (bez prefiksu). Od wersji: Chrome 63 (w pełni od 144), Firefox 59 (w pełni od 150), Safari 16 (częściowo). Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
overflow
scroll-snap-type
scroll-behavior
touch-action