虎扯:小众玩物 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;} /*鼠标在滑块之上的颜色值*/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,百度等,包括国际品牌谷歌,火狐等)无一例外,支持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,585评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,703评论 0 26
  • 浏览器发展史 现在浏览器已经成为网上生活的重要家园和工具。而从1991年,Web之父Tim Berners-Lee...
    波段顶底阅读 17,298评论 6 86
  • “有很多事,当我们离得很远的时候,我们看到的只是它的光明,当我们离得很近时,我们就会过多的注意到它阴暗的一面,看人...
    闲茶淡花阅读 568评论 0 4
  • 背景 端午节没有出去玩就在姨妈家吃饭然后带着小外甥女出去玩了一趟晚上回到家上成长会学习系统课。小外甥女很喜欢跟我玩...
    shawnxjf阅读 163评论 0 0