1. 前言
在WEB项目的前端开发中一般很少会注意到滚动条的样式。
但是如果你遇到一个有“想法”的设计师，刚好她用的是Mac，她可能会想把项目中所有的滚动条都换成苹果原生的，甚至在这个基础上再增加点交互。
果然，前端有80%的工作量是设计师增加的，剩下的20%用给测试一份工作。
不幸的是，目前为止自定义滚动条样式还没有成为各大浏览器厂商的标准属性。
查阅资料的时候发现了国外同行的一个理念，原因可能就是下面这段话：
许多 UI 设计师认为绝不应该干涉滚动条等“标准化” UI 组件的表现。如果过度修改滚动条，可能会给网站/应用的用户造成困扰。
但是我们可爱的浏览器厂商还是给出了一些解决方案：“-webkit-scrollbar”。这里 -webkit-指代的是浏览器内核，也叫浏览器前缀。这里以webkit内核浏览器代码Chrome 为例子讲解，如果你需要考虑其他的浏览器的兼容，请自行查阅相关浏览器前缀以及兼容性。
下面让我们一起来认识一下 -webkit-scrollbar 属性。
2. 认识CSS滚动条选择器
::-webkit-scrollbar 是CSS滚动条选择器。点击这里查看MDN官方文档
MDN官方文档第一行就是下面这个警告，所以使用的时候要注意。
注意：非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
可用的CSS滚动条选择器
::-webkit-scrollbar选择整个滚动条::-webkit-scrollbar-track选择 滚动条的滚动区域（轨道）::-webkit-scrollbar-thumb选择滚动条的可拖拽部分（滑块）
以下是可用但不常用的属性：
::-webkit-scrollbar-button选择滚动条两端的上/下（或左/右）按钮::-webkit-scrollbar-track-piece选择滚动条轨道未被滑块覆盖的部分::-webkit-scrollbar-corner选择垂直滚动条和水平滚动条交汇的部分::-webkit-resizer选择出现在某些元素底角的可拖动调整大小的滑块（通常出现在可缩放的容器上）
浏览器兼容性(2023.11)
备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。
3. 实例源码
先看效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义滚动条</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
.container {
display: flex;
flex-flow: wrap;
width: 1130px;
margin: 0px auto;
}
.box {
width: 240px;
height: 200px;
text-align: justify;
padding: 10px;
border: 1px solid skyblue;
margin: 10px;
overflow: auto;
}
.box1::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f5;
/* width: 0;
background: transparent; */
/* display: none; */
}
.box1::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
.box1::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #555;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.box1::-webkit-scrollbar-thumb:hover {
background: skyblue;
}
.box2::-webkit-scrollbar {
/*滚动条整体样式*/
width: 12px; /*高宽分别对应横竖滚动条的尺寸*/
background-color: #f5f5f5;
}
.box2::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: #d62929;
}
.box2::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background: #f5f5f5;
}
.box3::-webkit-scrollbar {
/*滚动条整体样式*/
width: 6px;
}
.box3::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background-color: #000;
}
.box3::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.box4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.box4::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box4::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
.box5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.box5::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box5::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(
linear,
0 0,
0 100%,
color-stop(0.5, rgba(255, 255, 255, 0.2)),
color-stop(0.5, transparent),
to(transparent)
);
}
.box6::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.box6::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box6::-webkit-scrollbar-thumb {
background-color: #f90;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.box7::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
border-radius: 10px;
}
.box7::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box7::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.44, rgb(122, 153, 217)),
color-stop(0.72, rgb(73, 125, 189)),
color-stop(0.86, rgb(28, 58, 148))
);
}
.box8::-webkit-scrollbar-track {
border: 1px solid black;
background-color: #f5f5f5;
}
.box8::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box8::-webkit-scrollbar-thumb {
background-color: #000000;
}
.box9::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
.box9::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box9::-webkit-scrollbar-thumb {
background-color: #f90;
background-image: -webkit-linear-gradient(
90deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.box10::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
border-radius: 10px;
}
.box10::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box10::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 10px;
background-image: -webkit-linear-gradient(
90deg,
rgba(0, 0, 0, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.2) 75%,
transparent 75%,
transparent
);
}
.box11::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
border-radius: 10px;
}
.box11::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box11::-webkit-scrollbar-thumb {
background-color: #3366ff;
border-radius: 10px;
background-image: -webkit-linear-gradient(
0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent
);
}
.box12::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
border-radius: 10px;
background-color: #444444;
}
.box12::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f5;
}
.box12::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d62929;
background-image: -webkit-linear-gradient(
90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent
);
}
.box13::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
border-radius: 10px;
background-color: #cccccc;
}
.box13::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f5;
}
.box13::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d62929;
background-image: -webkit-linear-gradient(
90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent
);
}
.box14::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
background-color: #cccccc;
}
.box14::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box14::-webkit-scrollbar-thumb {
background-color: #fff;
background-image: -webkit-linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent
);
}
.box15::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
border-radius: 10px;
}
.box15::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box15::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #fff;
background-image: -webkit-gradient(
linear,
40% 0%,
75% 84%,
from(#4d9c41),
to(#19911d),
color-stop(0.6, #54de5d)
);
}
.box16::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
border-radius: 10px;
}
.box16::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.box16::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #fff;
background-image: -webkit-linear-gradient(
top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%
);
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box2">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box3">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box4">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box6">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box7">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box8">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box9">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box10">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box11">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box12">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box13">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box14">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box15">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
<div class="box box16">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor quasi
minima animi aspernatur veniam voluptatem maxime molestiae! Facere
sequi beatae sunt impedit eveniet, eum sit quisquam dolore quod
architecto praesentium.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
consequuntur tempore eos rerum qui deserunt voluptates cupiditate!
Officia porro eaque tenetur exercitationem eum illum officiis
reprehenderit dolore, veritatis ut culpa!
</p>
</div>
</div>
</body>
</html>
4. 一些外部的库
创建自定义滚动条存在一些问题。首先是缺少跨浏览器支持。其他可能问题包括：无法为滚动条增加过渡和动画效果。
一个备选方案是：隐藏默认的滚动条，并使用外部库来实现，但这可能会影响页面性能。而且可能还有其他潜在的可用性问题，因为这些库依赖 JavaScript 来模拟原生的滚动条行为。
SimpleBar
使用原生滚动行为的自定义滚动条 JavaScript 库：操作简单、轻量、易用、跨浏览器。
- Grsmto/simplebar
顾名思义，SimpleBar 旨在简化创建自定义滚动条的过程。唯一的缺点是它不能作为网站的主滚动条（译注：即根元素的滚动条）来使用，也不支持表格元素、文本输入区域和下拉选择框。
SimpleBar 主要适用于诸如动态聊天应用或一些在页面内部元素中有滚动行为的场景。
Overlay Scrollbars
一个隐藏原生滚动条、提供自定义样式滚动条的插件，保留了原生的功能和体验。- KingSora/OverlayScrollbars
Overlay Scrollbars 与 SimpleBar 很相似，但是它提供了对 HTML body 元素的支持。这意味着除了跨浏览器支持和移动端支持等特性，还可以把它作为网站的主滚动条来使用。
5. 总结
自定义滚动条目前为止还没有标准化的解决方案，但随着浏览器性能的升级，IE的消亡，通过一些浏览器前缀基本可以满足我们项目中自定义滚动条（虽然不推荐）的需求。
一般情况下，使用 ::-webkit-scrollbar 、 ::-webkit-scrollbar-track 、 ::-webkit-scrollbar-thumb 这三个属性就可以满足我们对浏览器滚动条的自定义。
如果无法满足推荐使用文章提到的两个滚动条库来实现。
希望本文能让你深入理解使用 CSS 自定义滚动条样式的工作原理。
如果有任何疑问，可以在文章下方评论区留言。
