overflow-y

Die overflow-y CSS-Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die oberen und unteren Ränder eines Block-Level-Elements überläuft. Dies kann nichts, eine Scrollleiste oder der überlaufende Inhalt sein. Diese Eigenschaft kann auch mittels der overflow-Kurzschreibweise gesetzt werden.

Probieren Sie es aus

Syntax

css
/* Keyword values */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

Die overflow-y-Eigenschaft wird als einzelnes <overflow>-Schlüsselwort festgelegt.

Wenn overflow-x hidden, scroll oder auto ist und die overflow-y-Eigenschaft visible (Standard) ist, wird der Wert implizit als auto berechnet.

Werte

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des inneren Randes des Elements oben und unten sichtbar sein. Das Element selbst ist kein scroll container.

hidden

Überlaufender Inhalt wird, falls nötig, abgeschnitten, um vertikal in das inneren Rand des Elements zu passen. Es werden keine Scrollleisten bereitgestellt.

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin-Eigenschaft definiert wird. Dadurch überläuft der Inhalt den inneren Rand des Elements um den <length>-Wert von overflow-clip-margin oder um 0px, falls nicht gesetzt. Der Unterschied zwischen clip und hidden besteht darin, dass das Schlüsselwort clip auch jegliches Scrollen, einschließlich programmiertem Scrollen, verbietet. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu etablieren, verwenden Sie overflow: clip zusammen mit display: flow-root. Das Element selbst ist kein Scroll-Container.

scroll

Überlaufender Inhalt wird, falls nötig, abgeschnitten, um vertikal in das inneren Rand des Elements zu passen. Browser zeigen Scrollleisten in vertikaler Richtung an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können dennoch überlaufenden Inhalt drucken.

auto

Überlaufender Inhalt wird an der inneren Kante des Elements abgeschnitten, und überlaufender Inhalt kann ins Sichtfeld gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur an, wenn der Inhalt überläuft, und verstecken die Scrollleisten standardmäßig. Wenn der Inhalt innerhalb des inneren Randes des Elements passt, sieht es aus wie bei visible, jedoch wird dennoch ein neuer Block-Formatierungskontext erstellt.

Hinweis: Der Schlüsselwortwert overlay ist ein veralteter Wert-Alias für auto. Mit overlay werden die Scrollleisten über dem Inhalt gezeichnet, anstatt Platz einzunehmen.

Formale Definition

Anfangswertvisible
Anwendbar aufBlock-containers, flex containers, and grid containers
VererbtNein
Berechneter Wertas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animationstypdiskret

Formale Syntax

overflow-y = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Beispiele

Verhalten von overflow-y festlegen

HTML

html
<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3
# overflow-properties

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch