overflow-y
overflow-y CSS 屬性用於設定當內容溢位塊級元素的頂部和底部邊緣時顯示的內容。它可以是無內容、捲軸或溢位內容。此屬性也可以透過使用 overflow 簡寫屬性來設定。
試一試
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;
}
語法
/* 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;
overflow-y 屬性被指定為單個 <overflow> 關鍵字值。
如果 overflow-x 是 hidden、scroll 或 auto，並且 overflow-y 屬性是 visible（預設），則該值將被隱式計算為 auto。
值
visible-
溢位內容不會被剪裁，並且可能在元素的填充框的頂部和底部邊緣之外可見。該元素框不是一個滾動容器。
-
如果需要，溢位內容會被剪裁以垂直適應元素的填充框。不提供捲軸。
clip-
溢位內容在元素的溢位剪裁邊緣處被剪裁，該邊緣使用
overflow-clip-margin屬性定義。因此，內容超出元素的填充框的長度為overflow-clip-margin的<length>值，如果未設定則為0px。clip和hidden的區別在於，clip關鍵字也禁止所有滾動，包括程式化滾動。不會建立新的格式化上下文。要建立格式化上下文，請將overflow: clip與display: flow-root一起使用。該元素框不是滾動容器。 scroll-
如果需要，溢位內容會被剪裁以垂直適應元素的填充框。無論內容是否實際被剪裁，瀏覽器都會在垂直方向顯示捲軸。（這可以防止內容更改時捲軸出現或消失。）印表機仍可能列印溢位內容。
auto-
溢位內容在元素的填充框處被剪裁，並且溢位內容可以滾動到檢視中。與
scroll不同，使用者代理僅在內容溢位時顯示捲軸，預設情況下隱藏捲軸。如果內容適合元素的填充框，它看起來與visible相同，但仍會建立新的塊級格式化上下文。
備註： 關鍵字值 overlay 是 auto 的一箇舊版別名。使用 overlay 時，捲軸會繪製在內容之上，而不是佔用空間。
正式定義
| 初始值 | visible |
|---|---|
| 應用於 | 塊容器、伸縮容器和網格容器 |
| 繼承性 | 否 |
| 計算值 | 按照指定，但如果 overflow-x 或 overflow-y 兩者都不是 visible 也不是 clip，則 visible/clip 分別計算為 auto/hidden |
| 動畫型別 | 離散 |
正式語法
overflow-y =
visible |
hidden |
clip |
scroll |
auto
示例
設定 overflow-y 行為
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;
}
結果
規範
| 規範 |
|---|
| CSS 溢位模組第 3 級 # overflow-properties |
瀏覽器相容性
載入中…