CSS overflow-y - 易学教程，面试笔记经验！

CSS Overflow-y 属性决定块级元素的内容超出元素顶部和底部边缘时的显示方式。

属性值

visible: 溢出内容显示在元素边界之外。
hidden: 内容被剪裁，任何溢出都不可见。
clip: 元素的内容被剪裁，并且不会溢出元素的顶部和底部边缘。
scroll: 元素通过添加滚动条使其可滚动。
auto: 向元素添加滚动条，以便用户可以查看其溢出内容。

适用范围

所有 HTML 元素。

DOM 语法

object.style.overflowY = "visible|hidden|clip|scroll|auto";

CSS Overflow-y: visible和hidden

下面的示例演示，当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>yxjc123.com CSS Overflow-y Visible</h4>
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 
      </div>
      <div class="overflow-y-hidden">
         <h4>yxjc123.com CSS Overflow-y Hidden</h4>
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 
      </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>yxjc123.com CSS Overflow-y Clip</h4>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 
   </div>
</body>
</html>

CSS Overflow-y: scroll和auto

Overflow-y 属性可以设置为滚动或自动。如果元素的内容溢出其顶部和底部边缘，则滚动值会向元素添加滚动条。

仅当元素的内容溢出其顶部和底部边缘时，自动值才会向元素添加滚动条。

<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>yxjc123.com CSS Overflow-y Scroll</h4>
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 
      </div>
      <div class="overflow-y-auto">
         <h4>yxjc123.com CSS Overflow-y Auto</h4>
         CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 
      </div>
   </div>
</body>
</html>