一、需求
滚动条样式太丑，太大了，稍微美化一下
二、方案
（1）webkit 内核
/*********** webkit 内核***************/
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
background: rgba(211, 212, 214, 0.5);
}
::-webkit-scrollbar.track { /*滚动条里面轨道*/
webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #C9CED6;
}
（2）火狐
/****************火狐***************/
* {
scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.3);
scrollbar-width: thin;
}
三、看个完整的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条的演示</title>
<style>
.box{
overflow-y: auto;
background-color: #f8f8f8;
height: 200px;
padding: 10px;
}
.content{
height:500px;
}
/*********** webkit 内核***************/
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
background: rgba(211, 212, 214, 0.5);
}
::-webkit-scrollbar.track { /*滚动条里面轨道*/
webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #C9CED6;
}
/****************火狐***************/
* {
scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.3);
scrollbar-width: thin;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
我有500px的高
</div>
</div>
</body>
</html>