浏览器滚动条 --- 自定义“衣裳”

由于种种原因，浏览器的默认滚动条“衣裳”实在是 (ˉ▽￣～)~~，为了“美”，本人结合万维网各大神给的经验和自己的实践，做了此篇总结。若有错误，请在评论里给出，我会及时更改。

我在电脑上打开了一些浏览器，先观察一下，其中IE浏览器版本（10-5）在我电脑上显示是一致的，火狐版本为 59.0.2。如下图（1）可见，除了火狐浏览器和Opera浏览器的样式与其他浏览器样式差别较大，其余样式差别不大，主要是颜色的不同。

不知道为什么我放不上图片，╭(╯^╰)╮ ε=唉 ！

（一）专属IE的“衣裳”

网上找到一个不错的分享，我自己在总结下，内容原网址

 由于放不了图，各位还是自己直观试试吧，一下是我的总结：

 1、关于scrollbar-dark-shadow-color属性，我是在win7系统下测试Edge、IE10、9、8、7、5都没有显示什么，包括和其他属性组合，也没效果；

 2、这几个元素的从属关系：   scrollbar-face-color || scrollbar-arrow-color || scrollbar-shadow-color > scrollbar-track-color > scrollbar-highlight-color >scrollbar-base-color > scrollbar-3dlight-color；

 3、scrollbar-3dlight-color不论设置什么颜色，滚动条轨迹组成部分的颜色变为white色,滚动框和滚动条箭头的颜色变浅灰色 ;

 4、scroll-base-color是一个备用颜色 ,在其他属性不设置任何颜色时，滚动条颜色为此色，滚动框黑色，滚动轨迹为此色的浅色系，上下箭头变深接近黑色;

 5、在只设置scrollbar-track-color或者只设置scrollbar-face-color时，上下两个箭头的颜色会变得比默认颜色深;

 6、在只设置scrollbar-face-color时候，滚动条轨迹组成部分的颜色变为white色;

 7、在只设置scrollbar-arrow-color时候，滚动条轨迹组成部分的颜色变为white色,滚动框和滚动条箭头的颜色变浅灰色;

 8、滚动条宽度无法设置，不能设置出弧度等形状 。 

（二）webkit内核的“衣裳”

eg:

html： 

css: 

这些伪元素还可以搭配很多伪类，英文链接, 汉文翻译

:horizontal   主要应用于选择水平方向滚动条，可以单独设置水平方向的样式

:decrement   应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment   用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:end   标识对象是否放到滑块的后面。

:double-button   该伪类可以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button    类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button   用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present    用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive    用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

:hover   鼠标悬浮时的效果

:active   被激活时的样式

:enabled    元素的可用状态

:disabled   元素的禁用状态

根据伪类可以增加滚动条的样式以及一些动画，我最常用的是 :hover、 :active 、:window-inactive，根据需求大家可以多多尝试。

（三）Firefox的“衣裳”

这件可真是换不下来了

网上给了一些参考，但我试了试，没弄明白，下面是连接，有兴趣的看完会的，若不麻烦留言给个例子吧 

https://bbs.kafan.cn/thread-1529981-1-1.html 

参考文件： 

 小天地，大世界[https://www.lyblog.net]   https://www.lyblog.net/detail/314.html

 https://webkit.org/blog/363/styling-scrollbars/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有