CSS - overflow-y 属性_CSS 菜鸟教程

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>

<< CSS - overflow-x 属性 CSS - overflow-block 属性 >>