overflow-y

**overflow-y** CSS 属性设置当内容超出块级元素顶部和底部边缘时显示的内容。这可能是空白、滚动条或溢出的内容。此属性也可以通过使用 overflow 简写属性来设置。

试一试

语法

css
/* Keyword values */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

overflow-y 属性被指定为单个 <overflow> 关键字值。

如果 overflow-x 为 hidden、scroll 或 auto 并且 overflow-y 属性为 visible（默认值），则该值将隐式计算为 auto。

值

visible

溢出内容不会被裁剪，并且可能在元素的填充框的顶部和底部边缘之外可见。元素框不是 滚动容器。

hidden

如果需要，溢出内容会被裁剪以垂直适应元素的填充框。不提供滚动条。

clip

溢出内容在元素的溢出剪辑边缘处被裁剪，该边缘使用 overflow-clip-margin 属性定义。因此，内容超出元素的填充框 <length> 值 overflow-clip-margin 或未设置时为 0px。clip 和 hidden 之间的区别在于 clip 关键字还禁止所有滚动，包括编程滚动。不会创建新的格式化上下文。要建立格式化上下文，请将 overflow: clip 与 display: flow-root 一起使用。元素框不是滚动容器。

scroll

如果内容超出范围，则必要时将其裁剪以垂直适应元素的内边距框。浏览器在垂直方向上显示滚动条，无论内容是否实际被裁剪。（这可以防止内容更改时滚动条出现或消失。）打印机可能仍然打印溢出的内容。

自动

溢出的内容在元素的内边距框处被裁剪，并且可以滚动查看溢出的内容。与scroll不同，用户代理仅在内容溢出时显示滚动条，默认情况下隐藏滚动条。如果内容适合元素的内边距框，则外观与visible相同，但仍然会建立新的块级格式化上下文。

注意：关键字值overlay是auto的旧值别名。使用overlay，滚动条绘制在内容的顶部，而不是占用空间。

正式定义

初始值visible
应用于块级容器、弹性容器和网格容器
继承否
计算值按指定值计算，但如果overflow-x或overflow-y既不是visible也不是clip，则visible/clip分别计算为auto/hidden。
动画类型离散

正式语法

overflow-y = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

示例

设置overflow-y行为

HTML

html
<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

结果

规范

规范
CSS溢出模块级别3
# overflow-properties

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅