UDN-企业互联网技术人气社区

板块导航

浏览  : 1902
回复  : 9

[CSS3] CSS3特性修改(自定义)浏览器默认滚动条

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 15:00:49 | 显示全部楼层 |阅读模式
  前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶。好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角、渐变、rgba等等。最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)【伪类(:hover/:link)】。这里写了一个Demo,来看看...

  一、HTML
  1. <div class="banner_box"></div>
复制代码

  二、CSS
  1.     <style>
  2.             .banner_box {
  3.                 width: 100%;
  4.                 height: 2000px;
  5.             }
  6.             /*滚动条样式*/
  7.             /*滚动条整体部分*/            
  8.             ::-webkit-scrollbar {
  9.                 width: 8px;
  10.             }
  11.             /*滚动条小方块*/            
  12.             ::-webkit-scrollbar-thumb {
  13.                 background-color: rgba(0, 0, 0, 0.6);
  14.                 -webkit-border-radius: 5px;    /* Safari 和 Chrome */
  15.                 -moz-border-radius: 5px;    /* Firefox */
  16.                 -o-border-radius: 5px;        /* Opera */
  17.                 border-radius: 5px;
  18.                
  19.             }
  20.             /*滚动轨道两端按钮*/
  21.             ::-webkit-scrollbar-button {
  22.                 -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1);
  23.                 /*border-radius: 10px;*/  
  24.                 background-color: #555;  
  25.             }
  26.             /*滚动轨道 内阴影*/            
  27.             ::-webkit-scrollbar-track {
  28.                 -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
  29.                 /*border-radius: 10px;*/  
  30.                 background-color: #F5F5F5;  
  31.             }
  32.      </style>
复制代码

  三、结果
1.png

  总结:这种CSS特性,可惜不被IE和火狐兼容,其他的都能看到结果,另外还有一种办法,通过div去改写滚动条。

相关帖子

发表于 2017-2-8 15:01:18 来自手机 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

发表于 2017-2-16 19:16:47 | 显示全部楼层
其实HTML5技术优势主要体现在能帮助企业降低开发成本、缩短开发周期、可以跨设备等
使用道具 举报

回复

发表于 2017-9-4 11:34:44 | 显示全部楼层
干货,学习到了。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部