overflow-y
语法
- overflow-y:<overflow-style>
- <overflow-style> = visible | hidden | scroll | auto | paged-x</i> | paged-y | paged-x-controls</i> | paged-y-controls | fragments
- 默认值:visible
- 适用于:块容器,伸缩盒容器,grid容器
- 继承性:无
- 动画性:否
- 计算值:指定值
取值
- visible:对溢出内容不做处理,内容可能会超出容器。
- hidden:隐藏溢出容器的内容且不出现滚动条。
- scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
- auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
- paged-x:TODO...(CSS3)
- paged-y:TODO...(CSS3)
- paged-x-controls:TODO...(CSS3)
- paged-y-controls:TODO...(CSS3)
- fragments:TODO...(CSS3)
说明
检索或设置对象处理纵向溢出内容的方式。
- 对应的脚本特性为overflowY。
兼容性
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 7.0+ | 3.2+ | 2.1+ | 18.0+ |
page-* | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0 |
page-*-controls | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0 |
fragments | 11.0 | 38.0 | 43.0 | 8.1 | 28.0 | 8.1 | 4.4.4 | 40.0 |
示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test {
overflow-y: auto;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
<li>新闻列表</li>
</ul>
</div>
</body>
</html>