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>