1. overflow 属性介绍

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

当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看
2. overflow 属性的值
值 描述
visible 默认值。内容不会被修剪,溢出部分会呈现在元素框之外
hidden 内容被修剪,溢出部分不可见
scroll 内容被修剪,无论是否溢出滚动条都会占据空间
auto 当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条
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 中滚动条的默认样式:
5d96c0790be2231d326d9e5e3937b466.png

可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式
选择器 描述
::-webkit-scrollbar 整个滚动条
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-scrollbar-thumb 滚动条上的滚动滑块
::-webkit-scrollbar-track 滚动条轨道

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

/* 整个滚动条 */
.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;
}

f7bbb512dd6ca363a736385a0fa8a470.png

END
本文作者:
文章标题:CSS overflow 内容溢出时的显示方式
本文地址:http://blog.imjunjun.cn/archives/134/
版权说明:若无注明,本文皆军军's Blog原创,转载请保留文章出处。
Last modification:August 17, 2022
如果觉得我的文章对你有用,请随意赞赏