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

• 1. overflow 属性介绍
• 2. overflow 属性的值
• 3. 自定义 overflow 的滚动条

1. overflow 属性介绍

---

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

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

2. overflow 属性的值

---

值	描述
visible	默认值。内容不会被修剪，溢出部分会呈现在元素框之外
hidden	内容被修剪，溢出部分不可见
scroll	内容被修剪，无论是否溢出滚动条都会占据空间
auto	当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条

3. 自定义 overflow 的滚动条

---

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

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

1. <style>
2. .container {
3. width: 260px;
4. height: 100px;
5. background: lightblue;
6. display: flex;
7. overflow-x: scroll;
8. margin: 20px;
9. }
10. .item {
11. width: 260px;
12. height: 100px;
13. line-height: 100px;
14. flex-shrink: 0;
15. text-align: center;
16. }
17. .item:nth-child(odd) {
18. background: lightcoral;
19. }
20. .item:nth-child(even) {
21. background: lightgreen;
22. }
23. </style>
25. <div class="container">
26. <div class="item">1</div>
27. <div class="item">2</div>
28. <div class="item">3</div>
29. <div class="item">4</div>
30. <div class="item">5</div>
31. </div>

macOS 中滚动条的默认样式:

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

站长源码网

选择器	描述
::-webkit-scrollbar	整个滚动条
::-webkit-scrollbar-corner	当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-scrollbar-thumb	滚动条上的滚动滑块
::-webkit-scrollbar-track	滚动条轨道

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

1. /* 整个滚动条 */
2. .container::-webkit-scrollbar {
3. width: 4px;
4. height: 7px;
5. }
6. /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
7. .container::-webkit-scrollbar-corner {
8. background: #b9b9b9;
9. }
10. /* 滚动条上的滚动滑块 */
11. .container::-webkit-scrollbar-thumb {
12. background: #E1660E;
13. border-radius: 10px;
14. }
15. /* 滚动条轨道 */
16. .container::-webkit-scrollbar-track {
17. background: #b9b9b9;
18. border-radius: 2px;
19. }