自定义浏览器滚动条样式(兼容chrome和firefox)
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势。
以下正文:
问题描述
浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必须修改滚动条的样式。
有人问,为什么不自己写一个滚动条?
其一,自己写的滚动条效率和兼容性比不上浏览器默认滚动条。
其二,自己写太麻烦了吧,能用默认的为什么不用呢 0.o
问题分析
既然要修改默认滚动条的样式,就需要了解滚动条的样式都有哪些属性可以修改,以及这些属性分别对应了滚动条的哪些部位?
下面有一张图可以很清楚的看到它们的对应关系:
属性描述:
::-webkit-scrollbar //滚动条整体部分
::-webkit-scrollbar-button //滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece //内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner //边角
::-webkit-resizer ///定义右下角拖动块的样式
解决方案
于是对于chrome,我们可以这样修改滚动条样式:
/*定义整个滚动条高宽及背景:高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{width:10px;background-color:#F5F5F5;
}
/*定义滚动条轨道:内阴影+圆角*/
::-webkit-scrollbar-track
{background-color:#F5F5F5;
}
/*定义滑块:内阴影+圆角*/
::-webkit-scrollbar-thumb
{border-radius:10px;background-color:#555;
}
一般我们这样设置这几个主要属性就OK了,但是如果你想更详细的css属性,也有:
:horizontal //水平方向的滚动条
:vertical //垂直 方向的滚动条
:decrement //应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
:increment //decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
:start //伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end //类似于start伪类,标识对象是否放到滑块的后面。
:double-button //该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
:single-button //类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
:no-button //用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
:corner-present //用于所有滚动条轨道,指示滚动条圆角是否显示。
:window-inactive //用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
用法如下:
::-webkit-scrollbar-track-piece:start {}
::-webkit-scrollbar-thumb:window-inactive {}
::-webkit-scrollbar-button:horizontal:decrement:hover {}
兼容性
IE
对于IE,目前只找到修改滚动条各种属性的颜色,未找到修改样式的地方。
具体可修改的颜色如下:
有个表格看的清楚:
代码:
.ie-div {scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
}
修改后的IE滚动条样式如下:
Firefox
火狐64位目前只提供了部分自定义滚动条的属性:
scrollbar-width
:该属性可取值:
scrollbar-width: auto; // 默认值
scrollbar-width: thin; // 比默认滚动条窄
scrollbar-width: none; // 不显示滚动条,但是仍可以滚动
下面是 thin
的样式(图一默认,图二thin):
scrollbar-color
:其可填写的值有:
scrollbar-color: auto; // 默认值
scrollbar-color: dark;
scrollbar-color: light;
scrollbar-color: red green; // 第一个滚轮颜色,第二个滚动条背景色
“
其中
dark
和light
并没有实现。
示例代码:
#style-0 {scrollbar-width: thin;scrollbar-color: #ccc #eee;
}
使用插件或者自己DIY
比较好用的插件:
JQuery Custom Scrollbar [1]
Perfect Scrollbar[2] :只有6K大小。
其它
我看到还有更骚的操作是在界面上套一层div,然后在滚动条的地方挖孔,只显示一部分滚动条出来,然后显示的一部分滚动条就是类似自定义的样式。。。
总结
如果只是修改样式的,IE算是没辙了,但是firefox还有救。
我的折中方式是,把chrome的样式设置和firefox一样。
代码:
/**
描述:自定义浏览器滚动条样式。示例:如 my-div 需要使用自定义滚动条,直接如下写法。.my-div {overflow: auto;@import '../../commons/css/custom_scroll.less';
}注意:元素需要使用 `overflow:hidden ` 属性。兼容性:兼容chrome和firefox,不兼容IE*/&::-webkit-scrollbar {width: 6px;background-color: #eee;
}&::-webkit-scrollbar-thumb {background-color: #c1c1c1;&:hover {background-color: #a8a8a8;}&:active {background-color: #787878;}
}& {scrollbar-width: thin;scrollbar-color: #c1c1c1 #eee;
}
如此,chrome和firefox可算长得一样了。
参考链接
https://segmentfault.com/a/1190000012800450
提问与交流
你在前端项目中都是如何统一滚动条样式的?欢迎留言和我交流吧!
参考资料
[1]
JQuery Custom Scrollbar : https://github.com/malihu/malihu-custom-scrollbar-plugin
[2]
Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
题图:Erik Johansson
自定义浏览器滚动条样式(兼容chrome和firefox)相关推荐
- 自定义浏览器滚动条样式
转载自:https://www.lyblog.net/detail/314.html 自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5. ...
- 修改浏览器滚动条样式(兼容IE)
通常为了满足页面整体的风格的情况下,需要修改滚动条的颜色,各大视频网站都是以添加自定义滚动条的方式来满足,其实也可以理解,毕竟好像就只要添加一两个而已.如果是做管理系统或者其它需要多处修改浏览器滚动条 ...
- 自定义浏览器css,CSS自定义浏览器滚动条样式
前言 最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. / ...
- html滚动条样式自定义,CSS自定义浏览器滚动条样式
前言 最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. 该 ...
- CSS3自定义浏览器滚动条样式
一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border: ::-webkit-scrollbar ...
- 自定义浏览器滚动条的样式,详细讲解
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域, ...
- 自定义IE浏览器滚动条样式
自定义IE浏览器滚动条样式 原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支 ...
- 自定义浏览器滚动条的样式
自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5).下面列出了多个版本的支持性况: 滚动条样式 支持情况 支持浏览器版本 可否继承 ...
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chro ...
最新文章
- SAP RETAIL 商品主数据里的X-DChain Status字段
- SDUT2389Ballot evaluation
- 大数据在医疗保健中的真正愿景
- Android自定义View——可以设置最大宽高的FrameLayout
- 海鸥表表带太长了怎么拆_表带安装,表带太长了,怎么拆解和安装?
- python顺序结构逆序三位数_Python练习题3.20逆序的三位数
- Java中创建子类实例时会创建父类实例?
- 纯HTML的个人简历,真的超简单,有源码
- centos7 禁止ip访问_centos7下使用iptables屏蔽所有中国IP
- 高仿项目协作工具【Worktile】,从零带你一步步实现组织架构、网盘、消息、项目、审批等功能
- 卡尔曼滤波原理及公式推导
- 连续型随机变量及概率密度
- Super NES Programming/SNES Specs
- HPE MSA存储的高性能连接解决方案
- Unity官方教程——VR in Unity: A Beginner‘s Guide (using VRTK)转译
- 吴恩达机器学习笔记(五)正则化Regularization
- 关于VB中的 comct132.ocx问题!
- layui 输入框添加自定义图标
- java piggy,piggymetrics
- 电脑好玩技巧3——任务栏透明度
热门文章
- 年薪200万数据库牛人牛新庄的成长历程
- java版我的世界快速建造_我的世界原版快速打造建筑指令教程分享
- 洛阳计算机专业学校排名,洛阳最好的中专学校有哪些 十大中专学校排名
- Sitecore Experience Platform Pre-Auth RCE 复现【CVE-2021-42237】
- 【C++】友元+内存管理
- 360周鸿祎离婚老婆能分得90亿,如果奶茶妹妹离婚会不会分走更多?
- 微信小程序支付调用官方接口(前端js)
- 清华大学出版社“抄袭事件”回放
- 快速分析出百世快运中转延误的单号,并导出表格
- SATO SBPL RFID相关指令