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;}