CSS overflow-y 属性确定当块级元素的内容超过元素的顶部和底部边缘时如何显示。
可能的值
- visible -溢出内容显示在元素的边界之外。
- hidden -内容被剪裁，并且任何溢出都不可见。
- clip -元素的内容被剪裁，并且不会溢出元素的顶部和底部边缘。
- scroll−通过添加滚动条，可以使元素可滚动。
- auto −滚动条将添加到元素中，以便用户可以查看其溢出内容。
适用于
所有 HTML 元素。
DOM 语法
object.style.overflowY = "visible|hidden|clip|scroll|auto";
CSS overflow-y - 具有可见和隐藏的值
以下示例演示，当 overflow-y 属性设置为 visible 时，它允许内容溢出其顶部和底部边缘的填充框，或者当设置为 hidden 时，它会隐藏任何溢出的内容。
<html>
<head>
<style>
.container {
display:flex;
}
div.overflow-y-visible {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-y: visible;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
div.overflow-y-hidden {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-y: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-y-visible">
<h4>Tutorialspoint CSS Overflow-y Visible</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
<div class="overflow-y-hidden">
<h4>Tutorialspoint CSS Overflow-y Hidden</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</div>
</body>
</html>
CSS overflow-y - clip 值
overflow-y： clip 属性隐藏超过元素填充框的任何垂直溢出。不会添加任何滚动条。
例这是一个例子 -
<html>
<head>
<style>
div.overflow-y-clip {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-y: clip;
}
h4 {
text-align: center;
color: #D90F0F;
}
</style>
</head>
<body>
<div class="overflow-y-clip">
<h4>Tutorialspoint CSS Overflow-y Clip</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</body>
</html>
CSS overflow-y - 带有滚动和自动值
overflow-y 属性可以设置为 scroll 或 auto。如果元素的内容溢出其顶部和底部边缘，则 scroll 值会向元素添加滚动条。
仅当元素的内容溢出其顶部和底部边缘时，auto 值才会向元素添加滚动条。
<html>
<head>
<style>
.container {
display:flex;
}
div.overflow-y-scroll {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-y: scroll;
margin-right: 100px;
}
h4 {
text-align: center;
color: #D90F0F;
}
div.overflow-y-auto {
background-color: #2fe262;
border: 2px solid #000000;
width: 170px;
height: 160px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-y-scroll">
<h4>Tutorialspoint CSS Overflow-y Scroll</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
<div class="overflow-y-auto">
<h4>Tutorialspoint CSS Overflow-y Auto</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
</div>
</div>
</body>
</html>
