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 Juli 2015.
Die overflow-y CSS Eigenschaft bestimmt, was angezeigt wird, wenn der Inhalt über die oberen und unteren Kanten eines Block-Elementes hinausgeht. Dies kann nichts sein, eine Scroll-Leiste oder der überfließende Inhalt. Diese Eigenschaft kann auch durch die Nutzung der Kurzform overflow festgelegt 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
/* 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 ein einziges <overflow> Schlüsselwort angegeben.
Wenn overflow-x auf hidden, scroll oder auto gesetzt ist und die overflow-y Eigenschaft auf visible (Standard) gesetzt ist, wird der Wert implizit als auto berechnet.
Werte
visible-
Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb der inneren Auffüllung des Elements an den oberen und unteren Kanten sichtbar sein. Das Element ist kein scroll container.
-
Überlaufender Inhalt wird bei Bedarf abgeschnitten, um vertikal in die innere Auffüllung des Elements zu passen. Es werden keine Scroll-Leisten angezeigt.
clip-
Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der
overflow-clip-marginEigenschaft definiert ist. Dadurch überfließt der Inhalt die Innenauffüllung des Elements um den<length>Wert vonoverflow-clip-marginoder um0px, wenn nicht festgelegt. Der Unterschied zwischenclipundhiddenist, dass dasclipSchlüsselwort auch jegliches Scrollen verbietet, einschließlich programmatischem Scrollen. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sieoverflow: clipzusammen mitdisplay: flow-root. Das Element ist kein Scroll-Container. scroll-
Überlaufender Inhalt wird bei Bedarf abgeschnitten, um vertikal in die Innenauffüllung des Elements zu passen. Browser zeigen Scroll-Leisten in vertikaler Richtung, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird. (Dies verhindert, dass Scroll-Leisten bei Inhaltsänderung erscheinen oder verschwinden.) Drucker können dennoch überlaufenden Inhalt drucken.
auto-
Überlaufender Inhalt wird an der Innenauffüllung des Elements abgeschnitten, und der überlaufende Inhalt kann in den sichtbaren Bereich gescrollt werden. Im Gegensatz zu
scrollzeigen Benutzeragenten nur dann Scroll-Leisten, wenn der Inhalt überläuft, und verstecken standardmäßig Scroll-Leisten. Wenn der Inhalt in die Innenauffüllung des Elements passt, sieht es aus wie beivisible, etabliert jedoch trotzdem einen neuen Block-Formatierungskontext.
Hinweis:
Der Schlüsselwortwert overlay ist ein veralteter Wertalias für auto. Bei overlay werden die Scroll-Leisten auf dem Inhalt gezeichnet, anstatt zusätzlichen Raum einzunehmen.
Offizielle Definition
| Anfangswert | visible |
|---|---|
| Anwendbar auf | Block-containers, flex containers, and grid containers |
| Vererbt | Nein |
| Berechneter Wert | as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
| Animationstyp | diskret |
Offizielle Syntax
overflow-y =
visible |
hidden |
clip |
scroll |
auto
Beispiele
Verhalten von overflow-y festlegen
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
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 |