📜  HTML | DOM Style overflowY 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.143000             🧑  作者: Mango

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 的元素无效,只有在 blockinline-block 元素上才可以使用。

更多关于 overflow-yoverflowY 属性的细节可以参考 MDN 文档