虎扯：小众玩物 webkit家的滚动条

前面的话：对只有一种浏览器支持的属性，就不要出来秀咱前端同学，就像是早些年手机们的充电口一样，集各家所长，咱今天说的是webkit的滚动条样式，视乎只有webkit支持此项定义，有见识的前辈来辩。这玩意儿也就可以玩玩，涨涨见识，跑跑PC版的谷歌，UC...亲测，在移动端完全不支持

这是一个简短的小短文：

 属性写哪，用的是伪类，直接写在css文件中，带上::双引号

------<!--正文-->------

主要有以下属性，一眼望到头

 ::-webkit-scrollbar-track {
           background-color: #b46868;  /*定义外层轨道*/
     }
 ::-webkit-scrollbar-thumb {
           background-color: rgba(0, 0, 0, 0.2);   /*定义滑块*/
     }
 /*::-webkit-scrollbar-button {
           background-color: #7c2929;  /*定义两端按钮，已经定义没有按钮啦*/
     }*/
 ::-webkit-scrollbar-corner {
           background-color: black;  /*可不定义，但必须加上*/
     }
 ::-webkit-scrollbar{width:1em; height:100%;}   /*整体设置宽高*/  

 ::-webkit-scrollbar-track-piece{background-color:transparent;}  /*内层轨道设置颜色值*/

 body::-webkit-scrollbar-track-piece{background-color:#ccc;}  /*在body中的内层轨道设置一个颜色*/

 ::-webkit-scrollbar-track-piece:no-button{}  /*没有两端的按钮*/

 ::-webkit-scrollbar-thumb{background-color:#29944d;border-radius: 2px;}  /*滑块的样式，颜色值，和圆角*/

 ::-webkit-scrollbar-thumb:hover{background-color:red;}  /*鼠标经过滑块的反馈*/

 ::-webkit-scrollbar-thumb:active{background-color:#0eaf52;} /*鼠标在滑块之上的颜色值*/
 body{height: 2000px;}

直接上效果：

结论：

PC端： 不支持的有IE（废话嘛），火狐

移动端： 完全不支持

------<!--end-->------

------<!--尾部YY-->------

后语：

这属性在我的眼中没啥的使用价值，也许是眼光还不够，说不定以后还玩出新花样呢

最近发现移动端的UC居然不支持flex，UC你是想上天吗，果断发建议，得到的回答是“两天后给您答复哦”，我等着呢。在测试中，除了操蛋的手机版UC不支持好用的flex外，其他手机浏览器（包括国产的qq浏览器，360，百度等，包括国际品牌谷歌，火狐等）无一例外，支持。帮我问候UC家工程师