📅  最后修改于: 2023-12-03 15:01:12.143000             🧑  作者: Mango
overflowY
属性是 HTML DOM 中 style
对象的一部分,在 CSS 中对应于 overflow-y
属性。它用于控制元素内容在垂直方向上溢出时的处理方式。
当元素内容超出父容器的高度时,可以使用 overflowY
属性来定义内容的溢出行为。该属性可接受以下值:
visible
:默认值,内容会在父容器外部显示,不会被裁剪。auto
:如果内容超出了父容器的高度,将显示滚动条以便查看溢出的内容。scroll
:内容会始终显示滚动条,无论内容是否超出容器。hidden
:超出容器的内容将被隐藏。element.style.overflowY = "visible|auto|scroll|hidden";
element
:要设置 overflowY
属性的元素。visible
:内容在溢出时不进行裁剪,默认值。auto
:内容超出时显示滚动条。scroll
:始终显示滚动条,无论内容是否溢出。hidden
:超出容器的内容将被隐藏。<style>
.wrapper {
height: 100px;
overflow-y: auto;
}
</style>
<div class="wrapper" style="overflow-y: scroll;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed fermentum ex nec metus iaculis, at fermentum neque lacinia.</p>
<p>Phasellus consequat justo nec justo laoreet sollicitudin.</p>
<p>Pellentesque malesuada elit eget nisl malesuada cursus.</p>
</div>
上述示例中,.wrapper
的高度为 100 像素,如果内容超过该高度,将显示垂直滚动条以便查看溢出内容。
overflowY
属性只控制垂直方向上的溢出行为,若要控制水平方向上的溢出,可以使用 overflow-x
属性。overflowY
属性仅在元素有指定高度(比如通过 CSS 或内联样式设置)时才有效果。overflowY
属性对于 display: table-cell
的元素无效,只有在 block
或 inline-block
元素上才可以使用。更多关于 overflow-y
和 overflowY
属性的细节可以参考 MDN 文档。