前言

      用惯了浏览器默认的滚动条之后，就会觉得它枯燥乏味，很多人想给自己的网站弄一个自己喜欢滚动条，也能让用户在浏览自己的网站的时候觉察到自己的网站和别人网站的不同，何乐而不为呢。

      如果想给自己的网站弄一个自定义的滚动条，就得通过CSS代码来完成，同时也得需要浏览器的配合，有的浏览器是不支持自定义滚动条的，因为那些浏览器比较老，有些CSS代码他们无法识别，目前大部分主流浏览器基本上都支持自定义滚动条，除了IE浏览器不支持以外，基本上全部支持，所以没啥顾忌。

滚动条的组成代码 功能分析

     制作一个简单的滚动条只要用到下面这三种属性，属性的作用请看表格
   

滚动条的CSS代码

      上面的表格已经列出了一个简单的滚动条基础的三种属性，知道这三种属性之后，接下来就是写CSS代码了，本人提供一下本站的滚动条代码，各位可以参考一下代码，然后在自己修改一下，修改成你喜欢的样式即可。

      CSS代码如下：

/*滚动条的宽度和高度，以及滚动条的背景颜色*/
::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}
 
/*滚动条的轨迹，内阴影颜色还有圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color:#F5F5F5;
}
 
/*滚动条滑块颜色、内阴影颜色还有圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #66D9EF;
}

滚动条CSS代码的使用方法

     滚动条CSS代码的使用方法非常简单，只需要建立一个css文件，把代码放进去，然后在html文件里面调用这个css文件即可，或者把代码加入已有的css文件里面即可，只需要把css文件调用到html文件里面即可，或者在html文件里面通过<style>标签把css代码加在html文件里面即可，不需要主动调用代码，浏览器会自动判断。