浏览器页面滚动条美化（样式）

浏览器页面滚动条美化（样式）
最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下：
其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改变聊轨道以及轨道上的火车。我们要做的其实就是修改轨道以及将火车的头换成子弹头，颜色刷成白色，车身改成流线行。不知道这个比喻合不合适，反正我只这么理解的。
但是每次我们提到这些感觉..格比较高的东西时各大浏览厂商器都是自成一派，真希望将来新版CSS将他们都统一了。下来我们就来讲讲chrome和IE,fireForks目前展示没有到找到的感觉貌似也没有效果不知道是不是我的浏览器版本不对还是哪里没有写对！有兴趣的同学可以自己研究一下！
chrome：
我们先修改轨道的样式：
::scrollbar /*定义轨道的宽高{height定义的是横向轨道的高，width定义的是垂直轨道的宽}/
::-webkit-scrollbar-button /*滚动条两端的按钮。可以用 display:none让其不显示，也可以添加背景图片，颜色改变显示效果。默认是none/
::-webkit-scrollbar-corner /* 边角/
::-webkit-resizer /*定义右下角拖动块的样式/
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
::scrollbar-track /*定义的轨道的样式/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
border-radius:2px;
background-color: silver;
}
然后我们来定义轨道上的滑块的样式：
::scrollbar-thumb /*定义的滑块的样式/
::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: blue;
}
::scrollbar-thumb:hover /*滚动条按钮:鼠标悬停与点击拖动时基本样式 /
::-webkit-scrollbar-thumb:hover
{
border-radius: 3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: red;
}
下面是效果图，比较丑，不要介意，具体你要弄成什么样子这还是要看你的需求。

其实上面的基本上就可以完成我们平时需求了，webkit其实还提供了许多的伪类，可以定制更丰富滚动条样式。具体可以参考：https://www.webkit.org/blog/363/styling-scrollbars/

: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团队有计划扩展它并推动成为一个标准的伪类)
另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。

IE:
自定义IE浏览器滚动条样式
追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况：

滚动条样式 支持情况 支持浏览器版本 可否继承 描述
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 设置滚动条轨迹组成部分的颜色
html {
scrollbar-face-color:#bfbfbf;/滚动条颜色/
scrollbar-highlight-color:#111;
scrollbar-3dlight-color:#111;
scrollbar-darkshadow-color:#111;
scrollbar-Shadow-color:#dddddd;/滑块边色/
scrollbar-arrow-color:rgba(0,0,0,0.5);/箭头/
scrollbar-track-color:#eeeeee;/背景颜色/
}

当然如果我们嫌弃兼容麻烦我们也可以选择使用插件jquery-custom-content-scrolle，初步的使用方法就是：
第一步：（引入插件（样式，js））
第二步：在要显示滚动条的元素（元素内容中必须要有溢出的块，否则就不会出现滚动条）上面，加入class=”content”，然后初始化插件：
(window).load(function(){$(window).load(function(){$(“.content”).mCustomScrollbar();
});
如果你想要详细了解，请移步到：http://manos.malihu.gr/jquery-custom-content-scroller/。
好了今天就介绍到这里了。