overflow-y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die overflow-y CSS Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die oberen und unteren Ränder eines Block-Elements überläuft. Dies kann nichts sein, eine Bildlaufleiste oder der Überlaufinhalt. Diese Eigenschaft kann auch mit der overflow Kurzform-Eigenschaft gesetzt werden.

Probieren Sie es aus

overflow-y: visible;

overflow-y: hidden;

overflow-y: clip;

overflow-y: scroll;

overflow-y: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

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 Single <overflow> Schlüsselwortwert angegeben.

Wenn overflow-x auf hidden, scroll oder auto gesetzt 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 Element-Rahmenpolsters an den oberen und unteren Rändern sichtbar sein. Das Elementkästchen ist kein scroll container.

hidden

Überlaufender Inhalt wird abgeschnitten, sofern nötig, um vertikal in das Polster des Elements zu passen. Es werden keine Bildlaufleisten bereitgestellt.

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin Eigenschaft definiert ist. Dadurch überläuft der Inhalt den Polsterbereich des Elements um den <length> Wert von overflow-clip-margin oder um 0px, wenn nicht gesetzt. Der Unterschied zwischen clip und hidden ist, dass das clip Schlüsselwort auch jegliches Scrollen verbietet, einschließlich programmatischem Scrollen. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sie overflow: clip zusammen mit display: flow-root. Das Elementkästchen ist kein scroll container.

scroll

Überlaufender Inhalt wird bei Bedarf vertikal innerhalb des Polsterbereichs des Elements abgeschnitten. Browser zeigen vertikale Bildlaufleisten an, unabhängig davon, ob Inhalt tatsächlich abgeschnitten wird oder nicht. (Dies verhindert, dass Bildlaufleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können weiterhin überlaufenden Inhalt drucken.

auto

Überlaufender Inhalt wird an der Polsterbox des Elements abgeschnitten, und überlaufender Inhalt kann in den sichtbaren Bereich gescrollt werden. Anders als bei scroll zeigen Benutzeragenten Bildlaufleisten nur an, wenn der Inhalt überläuft und blenden Bildlaufleisten standardmäßig aus. Wenn der Inhalt in den Polsterbereich des Elements passt, sieht es aus wie bei visible, erstellt jedoch weiterhin einen neuen Block-Formatierungskontext.

Hinweis: Der Schlüsselwortwert overlay ist ein veralteter Wert, der als Alias für auto dient. Mit overlay werden die Bildlaufleisten über den 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 einstellen

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

Siehe auch