W3docs
de
Anmelden

CSS overflow-y Eigenschaft

Erfahren Sie, wie CSS overflow-y vertikales Clipping und Scrollleisten steuert. Behandelt alle Werte, Zusammenspiel mit overflow-x und Live-Beispiele.

Die Eigenschaft overflow-y steuert, was passiert, wenn der Inhalt eines Elements höher ist als sein Container. Der Inhalt kann überlaufen, unsichtbar abgeschnitten oder mit einer Scrollleiste versehen werden – entweder immer oder nur bei Bedarf.

overflow-y ist eine Hälfte der zweiachsigen Kurzschreibweise overflow. Das Gegenstück overflow-x behandelt die horizontale Richtung. Zusammen geben sie Ihnen eine feinkörnige Kontrolle darüber, wie eine Box clippt und scrollt.

Eigenschaftsreferenz

Anfangswertvisible
Gilt fürBlock-Container, flex-Container und grid-Container
VererbtNein
AnimierbarNein
VersionCSS3
DOM-Syntaxelement.style.overflowY = "scroll"

Syntax

overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;

Werte

WertBeschreibung
visibleInhalt wird nicht abgeschnitten und kann über die obere und untere Padding-Kante hinaus gerendert werden. Dies ist der Standardwert.
hiddenInhalt wird an der Padding-Box abgeschnitten. Es wird keine Scrollleiste angezeigt; abgeschnittener Inhalt ist nicht zugänglich.
scrollInhalt wird abgeschnitten und eine Scrollleiste wird immer angezeigt, auch wenn der Inhalt hineinpasst.
autoInhalt wird nur abgeschnitten, wenn er überläuft. Der Browser fügt bei Bedarf automatisch eine Scrollleiste hinzu.
clipInhalt wird wie bei hidden abgeschnitten, deaktiviert jedoch zusätzlich das programmatische Scrollen (scrollTop). Restriktiver als hidden.
initialSetzt die Eigenschaft auf ihren Standardwert zurück (visible).
inheritErbt den berechneten Wert vom übergeordneten Element.
Info

Wenn overflow-y auf scroll, auto oder hidden gesetzt ist, ändert der Browser automatisch jeden visible-Wert bei overflow-x zu auto. Das liegt daran, dass eine Box nicht in einer Achse abgeschnitten sein kann, während sie in der anderen wirklich uneingeschränkt bleibt – die Spezifikation lässt diese Kombination nicht zu.

Wann welchen Wert verwenden

  • visible — der Standard; nützlich, wenn ein Element (z. B. ein Tooltip oder Dropdown) absichtlich über seine Grenzen hinausgehen soll, ohne abgeschnitten zu werden.
  • hidden — verwenden Sie dies, um dekoratives Überlaufen abzuschneiden (z. B. ein großes Hintergrundbild, das keine Seiten-Scrollleisten verursachen soll) oder um einen neuen Block-Formatierungskontext zu etablieren.
  • scroll — verwenden Sie dies, wenn Sie immer den Platz für die Scrollleiste reservieren möchten, damit das Layout nicht verschoben wird, wenn der Inhalt wächst. Nützlich in Seitenleisten oder Panels, bei denen Layout-Stabilität wichtig ist.
  • auto — die häufigste Wahl für scrollbare Bereiche. Die Scrollleiste erscheint nur, wenn der Inhalt tatsächlich überläuft, und vermeidet so den permanenten Platzhalter, den scroll erzeugt.
  • clip — verwenden Sie dies, wenn Sie jegliches Scrollen (einschließlich der JavaScript-scrollTop-Manipulation) innerhalb eines begrenzten Bereichs verhindern möchten, ohne eine Scrollleiste anzuzeigen.

Beispiele

overflow-y: scroll

Die Scrollleiste wird immer angezeigt, auch wenn der gesamte Text hineinpasst. Der Container clippt vertikal und ermöglicht dem Benutzer das Scrollen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Probier es selbst »

overflow-y: visible

Inhalt wird über die untere Kante des Containers hinaus gerendert. Beachten Sie, dass der Text aus der grünen Box herausragt – es findet kein Clipping statt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.visible {
        background-color: #8ebf42;
        color: #666;
        height: 40px;
        width: 200px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Probier es selbst »

overflow-y: hidden

Inhalt wird an der unteren Kante des Containers abgeschnitten. Es wird keine Scrollleiste angezeigt und der abgeschnittene Inhalt ist durch Scrollen nicht erreichbar.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.hidden {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Probier es selbst »

overflow-y: auto

Eine Scrollleiste erscheint nur, wenn der Text die feste Höhe überläuft. Wäre der Inhalt kürzer als 60 px, würde keine Scrollleiste angezeigt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.auto {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>
Probier es selbst »

Alle Werte im Vergleich

Dieses Beispiel platziert alle vier Kernwerte nebeneinander, damit Sie deren visuelles Verhalten auf einen Blick vergleichen können.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: scroll;
      }
      div.hidden {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: hidden;
      }
      div.auto {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: auto;
      }
      div.visible {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y property example</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>overflow-y: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>
Probier es selbst »

Häufige Fallstricke

overflow-y: visible wird vom Browser still geändert. Wenn Sie overflow-x auf einem Element auf einen anderen Wert als visible setzen, wird overflow-y: visible als auto behandelt. Die Spezifikation erfordert, dass beide Achsen visible sind, wenn eine davon wirklich uneingeschränkt bleiben soll.

overflow-y: hidden erstellt einen Scroll-Container ohne Scrollleiste. Benutzer können nicht mit dem Mausrad oder einer Touch-Geste scrollen, aber JavaScript kann die Scroll-Position über scrollTop noch verschieben. Verwenden Sie overflow-y: clip, wenn Sie das ebenfalls verhindern möchten.

Eine feste height ist erforderlich, damit scroll und auto wirksam werden. Ohne eine eingeschränkte Höhe wächst das Element einfach, um seinen Inhalt aufzunehmen, sodass kein Überlauf auftritt und keine Scrollleiste erscheint.

Touch-Scrollen auf Mobilgeräten. Um impulsbasiertes Scrollen in einem overflow-y: auto- oder overflow-y: scroll-Container im iOS Safari zu aktivieren, müssen Sie in älteren Codebasen möglicherweise -webkit-overflow-scrolling: touch hinzufügen (dies ist in modernen iOS-Versionen, wo es standardmäßig aktiviert ist, nicht mehr erforderlich).

Stapelkontexte. Das Setzen von overflow-y auf einen anderen Wert als visible erstellt einen neuen Stapelkontext auf diesem Element. Dies kann beeinflussen, wie sich z-index bei untergeordneten Elementen verhält, die versuchen, den Container zu überlaufen.

Verwandte Eigenschaften

  • overflow — Kurzschreibweise für beide Achsen
  • overflow-x — horizontales Überlaufverhalten
  • overflow-wrap — steuert den Zeilenumbruch bei langen Wörtern
  • text-overflow — wie abgeschnittener Inline-Text signalisiert wird (z. B. Ellipse)
  • scroll-behavior — ob das Scrollen sanft animiert oder springt
  • resize — ermöglicht Benutzern, einen scrollbaren Container zu skalieren
  • height — die Höhenbeschränkung, die den Überlauf auslöst

Übung

Übung
Was macht die overflow-y-Eigenschaft in CSS?
Was macht die overflow-y-Eigenschaft in CSS?
Was this page helpful?