Hello 。。。
摘要：由于种种原因，浏览器的默认滚动条衣裳实在是，为了美，本人结合万维网各大神给的经验和自己的实践，做了此篇总结。标识对象是否放到滑块的后面。该伪类可以用于按钮和内层轨道。用于所有滚动条轨道，指示滚动条圆角是否显示。
由于种种原因，浏览器的默认滚动条“衣裳”实在是 (ˉ▽￣～)~~，为了“美”，本人结合万维网各大神给的经验和自己的实践，做了此篇总结。若有错误，请在评论里给出，我会及时更改。
我在电脑上打开了一些浏览器，先观察一下，其中IE浏览器版本（10-5）在我电脑上显示是一致的，火狐版本为 59.0.2。如下图（1）可见，除了火狐浏览器和Opera浏览器的样式与其他浏览器样式差别较大，其余样式差别不大，主要是颜色的不同。
不知道为什么我放不上图片，╭(╯^╰)╮ ε=唉 ！
（一）专属IE的“衣裳”
网上找到一个不错的分享，我自己在总结下，内容原网址
| 滚动条样式 | 支持情况 | 支持浏览器版本 | 可否继承 | 描述 |
|---|---|---|---|---|
| scrollbar-3dlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
| scrollbar-highlight-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头左上边缘的颜色 |
| scrollbar-face-color | IE特有属性 | IE5.5+ | y | 设置滚动框和滚动条箭头的颜色 |
| scrollbar-arrow-color | IE特有属性 | IE5.5+ | y | 设置滚动条箭头的颜色 |
| scrollbar-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动框的和滚动条箭头右下边缘的颜色 |
| scrollbar-dark-shadow-color | IE特有属性 | IE5.5+ | y | 设置滚动条槽的颜色 |
| scrollbar-base-color | IE特有属性 | IE5.5+ | y | 设置滚动条主要构成部分的颜色 |
| scrollbar-track-color | IE特有属性 | IE5.5+ | y | 设置滚动条轨迹组成部分的颜色 |
由于放不了图，各位还是自己直观试试吧，一下是我的总结：
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内核的“衣裳”
拥有webkit内核的浏览器差不多都支持下面的css属性，下边的伪元素最好放在css文件顶部，方便找。eg:
html：
css:
::-webkit-scrollbar { width: 10px; height: 10px; background: #f2f2f2; border: yellowgreen 1px solid; }::-webkit-scrollbar-button { background-color:#267326; }::-webkit-scrollbar-track { background:#9fdf9f; }::-webkit-scrollbar-track-piece { background:url(http://pic.58pic.com/58pic/16/41/00/49F58PICmZg_1024.jpg); }::-webkit-scrollbar-thumb { background:#339933; border-radius: 5px; }::-webkit-scrollbar-corner { background:#ff0000; }::-webkit-resizer { background:#ff0000; }::-webkit-scrollbar-button:horizontal { background-color:#00a3cc; }::-webkit-scrollbar-track:horizontal { background:#b3f0ff; }::-webkit-scrollbar-thumb:vertical { background:#1ad1ff; border-radius: 5px; }::-webkit-scrollbar-thumb:hover { background: #267326; }::-webkit-scrollbar-thumb:active { background: #267326; }::-webkit-scrollbar-thumb:vertical:hover { background: #00a3cc; }::-webkit-scrollbar-thumb:vertical:active { background: #00a3cc; }::-webkit-scrollbar-button:decrement { border: 1px solid #00a3cc; }::-webkit-scrollbar-button:increment { border: 1px solid #267326; }/* ::-webkit-scrollbar-track:corner-present { display: none } *//* ::-webkit-scrollbar-button:start { background-color: blue; } ::-webkit-scrollbar-button:end { background-color: green; } */ .main { padding: 20px; border: blue 1px dashed;}.box { width: 500px; height: 200px; overflow: scroll;} .box-ctn { width: 3000px; height: 1000px;}这些伪元素还可以搭配很多伪类，英文链接, 汉文翻译
:horizontal 主要应用于选择水平方向滚动条，可以多带带设置水平方向的样式
:vertical 主要是应用于选择竖直方向滚动条，可以多带带设置垂直方向的样式:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment 用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start 应用于按钮和滑块。它用来定义对象是否放到滑块的前面。: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/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2280.html
摘要：子元素固定高宽子元素不定高宽缺點需要设置子元素宽度包括百分比等非固定宽度也可以原理是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。路途未完，行囊已空衣裳破裂污损，人已精疲力竭。抛弃颜色形状等干扰代码实际布局 前言 PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!! PS: 2018/03/23修改，...
摘要：子元素固定高宽子元素不定高宽缺點需要设置子元素宽度包括百分比等非固定宽度也可以原理是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。路途未完，行囊已空衣裳破裂污损，人已精疲力竭。抛弃颜色形状等干扰代码实际布局 前言 PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!! PS: 2018/03/23修改，...
摘要：子元素固定高宽子元素不定高宽缺點需要设置子元素宽度包括百分比等非固定宽度也可以原理是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。路途未完，行囊已空衣裳破裂污损，人已精疲力竭。抛弃颜色形状等干扰代码实际布局 前言 PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!! PS: 2018/03/23修改，...
摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和I...
摘要：可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求...
阅读 458·2021-11-18 13:12
阅读 1391·2021-11-16 11:42
阅读 1071·2021-11-15 11:39
阅读 3327·2021-10-09 09:44
阅读 1301·2021-10-08 10:04
阅读 2325·2021-09-23 11:22
阅读 5786·2021-09-22 15:15
阅读 3438·2021-09-02 09:54
