在您开始建立自己的，感觉应该先录一个概念：内核的浏览器。
兼容性问题之前多次提及，而在平时经常会遇到兼容性问题。原因，就在于它：浏览器内核。这是比較通俗的说法，事实上应该把它描写叙述的专业点：Rendering Engine解释引擎。它负责网页语法进行解释，并对其内容和格式进行渲染（就是显示，用个词就感觉专业好多），而不同浏览器内核对网页语法的解释是不同的，就造成了所谓的“兼容问题”。
这里不多谈兼容的问题。但明确其原因。知晓其解决的一些办法就好了，而解决的最好办法就是，针对不同的内核编写不同的代码，当然针对详细的模块详细编写，这里先来介绍下浏览器内核的种类：
*Trident内核（IE内核）
*Gecko内核（Firefox内核）
*Webkit内核（Safari内核、chrome内核，开源）
*Blink内核（Google最新内核）
*Presto内核（Opera前内核）
而眼下我们最经常使用的则是前三种，所以我们现阶段进行编写的话主要针对上面三种内核的浏览器观察效果即可
言归正传。開始打造我们自己的专属滚动条，当然我们能够考虑不同的浏览器进行试验：
事实上，假设说是对一个滚动条最大的改变，就是一个：隐藏掉。从有到无，无中生有啊，差点儿质的改变，我们不得不在这里提这么一下。
<span style="font-size:12px;">overflow:hidden;</span>
当然假设是ie内核的浏览器的话，<body scroll="no">是相同有效的，
宏观上我们掌握了，接下来我们就開始那些细微之处的雕琢了，对于ie内核浏览器：
<span style="font-size:12px;">scrollbar-arrow-color: red; /*三角箭头的颜色*/ scrollbar-face-color: white; /*立体滚动栏的颜色（包含箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动栏亮边的颜色*/ scrollbar-highlight-color: red; /*滚动栏的高亮颜色（左立体边颜色）*/ scrollbar-shadow-color: red; /*立体滚动栏阴影的颜色*/ scrollbar-darkshadow-color: blue; /*立体滚动栏外阴影的颜色*/ scrollbar-track-color: yellow; /*立体滚动栏背景颜色*/ </span>
这样我们来看下。滚动栏成什么样子呢
仅仅是颜色上的一些变化。着实让人有些失望啊，可是你可知道它有多久了，从ie5.5到如今已是沧海桑田啊，我们能够为今天的漂亮来放弃过往的破旧。可是却不得不尊重那个以前从无到有的惊艳。
接下来，我们来编写下webkit以下的滚动条设定
<span style="font-size:12px;">body::-webkit-scrollbar{//滚动栏的总体部分
background-color: yellow;
width:100px;
}
body::-webkit-scrollbar-button{//滚动栏两端的按钮，display：none相同能够设定的
background-color: red;
}
body::-webkit-scrollbar-track{//外层轨道
background-color: blue;
}
body::-webkit-scrollbar-track-piece{//内层轨道。也就是滚动背景
background-color: green;
}
body::-webkit-scrollbar-thumb {//滚动栏里拖动部分
background-color: orange;
border-radius:10px;
}</span>
这样我们得到的又会是什么效果呢
有木有。有木有，我的如意金箍啊。要是上下再加上图画取代单调的色彩。是不是有些惊艳，有木有啊，当然我这个丑疯了。囧，至少它真的变了....
资料查询到，还有好多的伪元素能够实现这个功能，js、jquery相同能够实现这个，只是这里就不多说了，先让我偷乐会.....
哈，有点困了额。晚安
版权声明：本文博主原创文章。博客，未经同意不得转载。