HTML | DOM Style overflowY 属性

简介

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 文档。