overflow-y

概述

当一个块级元素(div元素、p元素之类的)的内容在垂直方向发生溢出时,

CSS属性overflow-y 决定如何处理溢出的内容。

隐藏溢出内容(hidden),或者显示滚动条(scroll),或者直接显示溢出内容(visible),或者让浏览器来处理(auto)。

初始值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
Animation typediscrete

Syntax[语法]

/* 在当前css选择器元素下, 元素内容在垂直方向上溢出时 */

/* overflow-y 属性 可选值 */

overflow-y: visible; /*内容可见*/
overflow-y: hidden; /*内容隐藏*/
overflow-y: scroll; /*总是显示滚动条*/
overflow-y: auto; /*浏览器决定*/


/* overflow-y 属性 全局可选值 */

overflow-y: inherit; /*继承*/
overflow-y: initial; /*默认值*/
overflow-y: unset; /*未设置*/

Values[可选值]

visible
内容不会被截断,且可以显示在内容盒之外。
hidden
内容会被截断,且不会显示滚动条。
clip 
像 hidden 一样,内容被剪切到元素的填充框中。 clip 和 hidden 的区别是 clip 还禁止所有滚动,包括程序性滚动(programmatic scrolling)。包含框不再是滚动容器,并且不会启动新的格式设置上下文。 如果要启动新的格式设置上下文,可以使用 display: flow-root
scroll
桌面浏览器总是显示滚动条,无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
auto
取决于浏览器本身。当内容发生溢出时,桌面浏览器如Firefox会显示滚动条。

Formal syntax[正式语法]

visible | hidden | clip | scroll | auto 

Example[示例]

HTML

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

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

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

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

</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black; /*元素边框 1px宽 黑边*/
  width:  280px;
  height: 120px;
}


#div1 { overflow-y: scroll; margin-bottom: 12px; }

#div2 { overflow-y: hidden; margin-bottom: 12px;  }

#div3 { overflow-y: visible; margin-bottom: 150px;  }

#div4 { overflow-y: auto; margin-bottom: 12px;  }

结果

规范

规范 状态 备注
CSS Basic Box Model
overflow-y
Working Draft

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 Unknown (1.5) 5.0 [*] 9.5 3.0
特性 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 1.0 (Yes) 1.0 (1.5) (Yes) (Yes) (Yes)

[*] IE8 引入了属性-ms-overflow-y,作用与overflow-y相同。不要使用前缀-ms-

参见