overflow-y
Die overflow-y
CSS Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die oberen und unteren Ränder eines Block-Elementes überläuft. Dies kann nichts sein, eine Scrollleiste oder der Überlaufinhalt. Diese Eigenschaft kann auch mithilfe der overflow
-Kurzform-Eigenschaft festgelegt werden.
Probieren Sie es aus
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 Eigenschaft overflow-y
wird als einzelner <overflow>
Schlüsselwortwert angegeben.
Wenn overflow-x
auf hidden
, scroll
oder auto
eingestellt ist und die Eigenschaft overflow-y
visible
(Standardwert) ist, wird der Wert implizit als auto
berechnet.
Werte
visible
-
Überlaufinhalt wird nicht abgeschnitten und kann außerhalb des Padding-Bereichs des Elements an den oberen und unteren Rändern sichtbar sein. Das Element ist keine Scroll-Container.
-
Überlaufinhalt wird abgeschnitten, wenn erforderlich, um vertikal in den Padding-Bereich der Elemente zu passen. Es werden keine Scrollleisten bereitgestellt.
clip
-
Überlaufinhalt wird am Überlauf-Ausschnittsrand des Elements abgeschnitten, der mithilfe der
overflow-clip-margin
Eigenschaft definiert wird. Dadurch überschreitet der Inhalt den Padding-Bereich des Elements um den<length>
Wert vonoverflow-clip-margin
oder um0px
, wenn nicht festgelegt. Der Unterschied zwischenclip
undhidden
besteht darin, dass dasclip
-Schlüsselwort alle Arten des Scrollens, einschließlich des programmatischen Scrollens, verbietet. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu erstellen, verwenden Sieoverflow: clip
zusammen mitdisplay: flow-root
. Das Element ist kein Scroll-Container. scroll
-
Überlaufinhalt wird abgeschnitten, wenn erforderlich, um vertikal im Padding-Bereich des Elements zu passen. Browser zeigen Scrollleisten in der vertikalen Richtung unabhängig davon an, ob Inhalt tatsächlich abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollleisten beim Ändern des Inhalts ein- oder ausgeblendet werden.) Drucker können dennoch überlaufenden Inhalt drucken.
auto
-
Überlaufinhalt wird im Padding-Bereich des Elements abgeschnitten, und überlaufender Inhalt kann in den sichtbaren Bereich gescrollt werden. Im Gegensatz zu
scroll
zeigen Benutzeragenten Scrollleisten nur dann an, wenn der Inhalt überläuft, wodurch Scrollleisten standardmäßig ausgeblendet werden. Wenn der Inhalt in den Padding-Bereich des Elements passt, sieht es wievisible
aus, jedoch wird dennoch ein neuer Block-Formatierungskontext erstellt.
Hinweis: Der Schlüsselwortwert overlay
ist ein veralteter Wertalias für auto
. Bei overlay
werden die Scrollleisten über dem Inhalt gezeichnet, anstatt Platz einzunehmen.
Offizielle Definition
Initialer Wert | 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
Beispiele
Festlegen des overflow-y-Verhaltens
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 |
Browser-Kompatibilität
BCD tables only load in the browser