CSS overflow 内容溢出时的显示方式
转载
- 1. overflow 属性介绍
- 2. overflow 属性的值
- 3. 自定义 overflow 的滚动条
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 中滚动条的默认样式:
可以使用以下伪元素选择器去修改各式 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;
}
