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 |
浏览器兼容性
加载中…