CSS overflow 内容溢出时的显示方式

1. overflow 属性介绍

css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。

当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看

2. overflow 属性的值

3. 自定义 overflow 的滚动条

以前不知道 overflow 的滚动条样式是可以修改的，最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式，才得知还有这么个东西，在此记录一下自定义滚动条的写法，这样可以更好的理解用法，虽然下次使用还要来这里看

首先，先来做一个有滚动条的容器

<style>
    .container {
        width: 260px;
        height: 100px;
        background: lightblue;
        display: flex;
        overflow-x: scroll;
        margin: 20px;
    }
    .item {
        width: 260px;
        height: 100px;
        line-height: 100px;
        flex-shrink: 0;
        text-align: center;
    }
    .item:nth-child(odd) {
        background: lightcoral;
    }
    .item:nth-child(even) {
        background: lightgreen;
    }
</style>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

macOS 中滚动条的默认样式:

可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

自定义滚动条样式代码示例:

/* 整个滚动条 */
.container::-webkit-scrollbar {
    width: 4px;
    height: 7px;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
.container::-webkit-scrollbar-corner {
    background: #b9b9b9;
}
/* 滚动条上的滚动滑块 */
.container::-webkit-scrollbar-thumb {
    background: #E1660E;
    border-radius: 10px;
}
/* 滚动条轨道 */
.container::-webkit-scrollbar-track {
    background: #b9b9b9;
    border-radius: 2px;
}