自定义滚动条样式
首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。
滚动条的css样式主要有三部分组成：
1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
下面以overflow-y:auto;为例（overflow-x:auto同）
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .innerbox{ 8 overflow-y: auto; 9 background-color: #f8f8f8; 10 height: 200px; 11 padding: 10px; 12 } 13 .content{ 14 height:500px; 15 } 16 .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ 17 width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ 18 height: 10px; 19 scrollbar-arrow-color:red; 20 21 } 22 .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 23 border-radius: 10px; 24 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 25 background: #626C83; 26 } 27 .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/ 28 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 29 border-radius: 10px; 30 background: #C9CED6; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="innerbox"> 36 11111 37 <div class="content"> 38 39 </div> 40 41 </div> 42 43 </body> 44 </html>
效果如下：
如果要改变滚动条的宽度：在::-webkit-scrollbar中改变即可；如果要改变滚动条滑块的圆角，在::-webkit-scrollbar-thumb 中改变；如果要改轨道的圆角在::-webkit-scrollbar-track中改变；
在项目中我们通常会修改全局的默认滚动条样式，此时只需要引入一个public.css即可，内容如下：
。。。。。。每天进步一点点，加油！
