overflow-y

CSS 属性 overflow-y 设置当内容溢出块级元素的上下两侧时所显示的内容。可以不显示,或显示滚动条,或显示溢出内容。也可以使用 overflow 简写属性来设置该属性。

尝试一下

语法

css
/* 关键字值 */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

/* 全局值 */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

overflow-y 属性可指定为下列 <overflow> 关键字值之一。

overflow-x 的值为 hiddenscroll 或者 auto,而 overflow-y 属性的值为 visible(默认值)时,该值会被隐式地计算为 auto

取值

visible

溢出的内容不会被截断,且可以显示在元素边距(padding)框的上下边缘之外。元素盒子不是滚动容器

hidden

如有必要,溢出的内容会被截断以从垂直方向适应元素的边距框,不会显示滚动条。

clip

溢出截断边缘(使用 overflow-clip-margin 属性定义)上的溢出内容会被截断。即,距元素内边距框指定宽度(为 overflow-clip-margin<length> 值,若未设置则为 0px)范围内的内容会溢出。cliphidden 的区别是 clip 关键字还禁止所有滚动,包括程序性滚动(programmatic scrolling)。其不会创建新的格式化上下文。如果要创建新的格式化上下文,请将 overflow: clipdisplay: flow-root 一起使用。元素盒子不是滚动容器。

scroll

如有必要,溢出的内容会被截断以从垂直方向适应元素的边距框。无论内容是否发生溢出,浏览器总是显示滚动条。(这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。)而打印机可能会打印溢出的内容。

auto

元素边距框中的溢出内容会被截断,且溢出内容可通过滚动以进行浏览。与 scroll 关键字值不同的是,用户代理只在内容溢出时显示滚动条,默认不会显示滚动条。如果内容可以适应元素的边距框,则看起来与 visible 相同,但仍然会创建新的格式化上下文。

备注: 关键字值 overlayauto 的一个遗留别名。使用 overlay 时,滚动条会绘制在内容上方,而不占用空间。

形式定义

初始值visible
适用元素Block-containers, flex containers, and grid containers
是否是继承属性
计算值as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
动画类型离散值

形式语法

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

示例

设置 overflow-y 行为

HTML

html
<ul>
  <li>
    <code>overflow-y:hidden</code>——在盒外隐藏文本
    <div id="div1">
      歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code>——总是添加滚动条
    <div id="div2">
      歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code>——必要时在盒外显示文本
    <div id="div3">
      歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code>——在多数浏览器上等价于 <code>scroll</code>
    <div id="div4">
      歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
    </div>
  </li>
</ul>

CSS

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

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

结果

规范

Specification
CSS Overflow Module Level 3
# overflow-properties

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-y
auto
clip
hidden
scroll
visible

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

参见