1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: overflow-y
slug: Web/CSS/overflow-y
tags:
- 元素单一方向溢出
translation_of: Web/CSS/overflow-y
---
<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">概述</h2>
<p>当一个块级元素（div元素、p元素之类的）的内容在垂直方向发生溢出时，</p>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a>属性<code>overflow-y </code>决定如何处理溢出的内容。</p>
<p>隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。</p>
<div>{{cssinfo}}</div>
<h2 id="Syntax" name="Syntax">Syntax[语法]</h2>
<pre>/* 在当前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; /*未设置*/
</pre>
<h3 id="Values" name="Values">Values[可选值]</h3>
<dl>
<dt><code>visible</code></dt>
<dd>内容不会被截断，且可以显示在内容盒之外。</dd>
<dt><code>hidden</code></dt>
<dd>内容会被截断，且不会显示滚动条。</dd>
</dl>
<dl>
<dt><code>clip</code> {{experimental_inline}}</dt>
<dd>像 <code>hidden</code> 一样，内容被剪切到元素的填充框中。 <code>clip</code> 和 <code>hidden</code> 的区别是 <code>clip</code> 还禁止所有滚动，包括程序性滚动（programmatic scrolling）。包含框不再是滚动容器，并且不会启动新的格式设置上下文。 如果要启动新的格式设置上下文，可以使用 {{cssxref("display", "display: flow-root", "#flow-root")}} 。</dd>
</dl>
<dl>
<dt><code>scroll</code></dt>
<dd>桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。</dd>
<dt><code>auto</code></dt>
<dd>取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。</dd>
<dt>
<h3 id="Formal_syntax正式语法">Formal syntax[正式语法]</h3>
{{csssyntax("overflow-y")}}
</dt>
</dl>
<h2 id="Example" name="Example">Example[示例]</h2>
<h3 id="Exampe_HTML" name="Exampe_HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="Example_CSS" name="Example_CSS">CSS</h3>
<pre class="brush: 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; }
</pre>
<h3 id="Example_Result" name="Example_Result">结果</h3>
<figure>{{EmbedLiveSample("Example", "100%", "760")}}</figure>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器支持</h2>
{{Compat("css.properties.overflow-y")}}
<h2 id="See_also" name="See_also">参见</h2>
<ul>
<li>相关CSS属性: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
