CSS overflow-y 属性

CSS overflow-y 语法

在 CSS 中，overflow-y 属性用于控制当内容 “垂直” 溢出元素的块级容器时，如何处理溢出部分。

语法：

overflow-y: 关键字;

说明：

overflow-y 的取值有 4 种，如下表所示。

overflow-y 属性取值
取值	说明
visible（默认值）	垂直方向溢出内容不会被裁剪，而是在元素框的外部显示
hidden	垂直方向溢出内容会被裁剪，并且不可见。不提供垂直滚动条
scroll	垂直方向溢出内容会被裁剪，但浏览器会显示垂直滚动条。注意：此时水平方向的 overflow-x 如果设置为 visible，将会被隐式计算为 auto。
auto	垂直方向溢出内容会被裁剪，仅在需要时显示垂直滚动条。注意：此时水平方向的 overflow-x 如果设置为 visible，将会被隐式计算为 auto。

对于 overflow-y 属性，我们需要清楚以下几点。

overflow-y 属性只作用于块级容器。
overflow-y 属性通常需要为元素设置一个固定的高度，否则内容可能不会垂直溢出，从而看不到垂直滚动条或隐藏效果。
overflow-x 属性可以与 overflow-y 结合使用。如果将 overflow-y 设置为非 visible 的值（如 hidden、scroll 或 auto），而 overflow-x 为 visible（默认值），那么 overflow-x 的计算值将会自动变成 auto。

CSS overflow-y 摘要

属于	CSS 盒子模型
使用频率	中
是否继承	否
默认值	visible
兼容性	查看
官方文档	查看
MDN	查看

CSS overflow-y 示例

接下来，我们通过几个简单的例子来讲解一下 CSS overflow-y 属性是如何使用的。

示例 1：overflow-y 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            overflow-y: scroll;     /* 垂直方向显示滚动条 */
            width: 200px;
            height: 150px;
            border: 1px solid gray;
            margin: 20px;
        }
        /* 制造垂直溢出的内容 */
        .content {
            height: 250px;
            background-color: lightskyblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
            <p>绿叶网 - 为好教程，全力以赴。</p>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

overflow-y 示例效果

分析：

在这个示例中，.box 设置了固定的高度和宽度，其子元素 .content 的高度大于父容器的高度，导致垂直溢出。通过设置 overflow-y: scroll;，盒子右侧显示了垂直滚动条，用户可以滚动查看全部内容。

注意: 即使内容没有垂直溢出，scroll值也会显示滚动条。

如果我们改为 overflow-y: auto;，此时页面效果如下图所示。对于 overflow-y: auto; 来说，只有当内容垂直溢出时，才会显示垂直滚动条。如果内容没有溢出，则不会显示滚动条，提供更干净的界面。小伙伴们可以自行减少一点内容，然后看看效果如何。

overflow-x: auto; 效果

示例 2：垂直滚动的新闻列表

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .news-container {
            overflow-y: auto;        /* 垂直方向自动显示滚动条 */
            width: 300px;
            height: 200px;
            padding: 0 10px;
            margin: 20px;
            border: 1px solid #ccc;
        }
        .news-item {
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
        }
        .news-item:last-child {
            border-bottom: none;     /* 最后一个项目没有下边框 */
        }
        h4 {
            margin: 0 0 5px 0;
            font-size: 1em;
        }
        p {
            margin: 0;
            font-size: 0.9em;
            color: gray;
        }
    </style>
</head>
<body>
    <div class="news-container">
        <div class="news-item">
            <h4>新闻标题 1</h4>
            <p>这是第一条新闻的简短内容摘要。</p>
        </div>
        <div class="news-item">
            <h4>新闻标题 2</h4>
            <p>这是第二条新闻的简短内容摘要。</p>
        </div>
        <div class="news-item">
            <h4>新闻标题 3</h4>
            <p>这是第三条新闻的简短内容摘要。</p>
        </div>
         <div class="news-item">
            <h4>新闻标题 4</h4>
            <p>这是第四条新闻的简短内容摘要。</p>
        </div>
        <div class="news-item">
            <h4>新闻标题 5</h4>
            <p>这是第五条新闻的简短内容摘要。</p>
        </div>
        <div class="news-item">
            <h4>新闻标题 6</h4>
            <p>这是第六条新闻的简短内容摘要。</p>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

overflow-y 用于实现垂直滚动的新闻列表

分析：

在上面例子中，我们创建一个固定大小的区域来显示一个可以垂直滚动的列表，例如新闻列表或评论列表。然后通过给 .news-container 设置固定的 height 和 overflow-y: auto;，当新闻项目过多导致垂直溢出时，就会自动出现垂直滚动条，而水平方向的内容则正常显示（或根据 overflow-x 设置处理）。

overflow 是一个复合属性

overflow 其实是一个复合属性，它是以下 2 个属性的简写。

overflow-x
overflow-y