前面的话：对只有一种浏览器支持的属性，就不要出来秀咱前端同学，就像是早些年手机们的充电口一样，集各家所长，咱今天说的是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;} /*鼠标在滑块之上的颜色值*/26 body{height: 2000px;}
直接上效果：
871918-20160329204355691-1574893148.jpg
871918-20160329204453941-867653776.jpg
871918-20160329204508441-1809627313.jpg
PC端： 不支持的有,IE（废话嘛），火狐
移动端： 完全不支持
后语：
这属性在我的眼中没啥的使用价值，也许是眼光还不够，说不定以后还玩出新花样呢
最近发现移动端的UC居然不支持flex，UC你是想上天吗，果断发建议，得到的回答是“两天后给您答复哦”，我等着呢。在测试中，除了操蛋的手机版UC不支持好用的flex外，其他手机浏览器（包括国产的qq浏览器，360，百度等，包括国际品牌谷歌，火狐等）无一例外，支持。
网友评论