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

 

  前面的话：对只有一种浏览器支持的属性，就不要出来秀咱前端同学，就像是早些年手机们的充电口一样，集各家所长，咱今天说的是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家工程师

 

posted @ 2016-03-29 21:01  小老虎的牙  阅读(214)  评论(0)  编辑  收藏  举报