前面的话：对只有一种浏览器支持的属性，就不要出来秀咱前端同学，就像是早些年手机们的充电口一样，集各家所长，咱今天说的是webkit的滚动条样式，视乎只有webkit支持此项定义，有见识的前辈来辩。这玩意儿也就可以玩玩，涨涨见识，跑跑PC版的谷歌，UC...亲测，在移动端完全不支持
这是一个简短的小短文：
属性写哪，用的是伪类，直接写在css文件中，带上::双引号
------<!--正文-->------
主要有以下属性，一眼望到头
1 ::-webkit-scrollbar-track { 2 background-color: #b46868; /*定义外层轨道*/ 3 } 4 ::-webkit-scrollbar-thumb { 5 background-color: rgba(0, 0, 0, 0.2); /*定义滑块*/ 6 } 7 /*::-webkit-scrollbar-button { 8 background-color: #7c2929; /*定义两端按钮，已经定义没有按钮啦*/ 9 }*/ 10 ::-webkit-scrollbar-corner { 11 background-color: black; /*可不定义，但必须加上*/ 12 } 13 ::-webkit-scrollbar{width:1em; height:100%;} /*整体设置宽高*/ 14 15 ::-webkit-scrollbar-track-piece{background-color:transparent;} /*内层轨道设置颜色值*/ 16 17 body::-webkit-scrollbar-track-piece{background-color:#ccc;} /*在body中的内层轨道设置一个颜色*/ 18 19 ::-webkit-scrollbar-track-piece:no-button{} /*没有两端的按钮*/ 20 21 ::-webkit-scrollbar-thumb{background-color:#29944d;border-radius: 2px;} /*滑块的样式，颜色值，和圆角*/ 22 23 ::-webkit-scrollbar-thumb:hover{background-color:red;} /*鼠标经过滑块的反馈*/ 24 25 ::-webkit-scrollbar-thumb:active{background-color:#0eaf52;} /*鼠标在滑块之上的颜色值*/ 26 body{height: 2000px;}
直接上效果：
结论：
PC端： 不支持的有IE（废话嘛），火狐
移动端： 完全不支持
------<!--end-->------
------<!--尾部YY-->------
后语：
这属性在我的眼中没啥的使用价值，也许是眼光还不够，说不定以后还玩出新花样呢
最近发现移动端的UC居然不支持flex，UC你是想上天吗，果断发建议，得到的回答是“两天后给您答复哦”，我等着呢。在测试中，除了操蛋的手机版UC不支持好用的flex外，其他手机浏览器（包括国产的qq浏览器，360，百度等，包括国际品牌谷歌，火狐等）无一例外，支持。帮我问候UC家工程师