不一样就是不一样，我的专属滚动条------Day35

标签：css   scrollbar   学习记录   内核   

开始自我打造之前，感觉首先应该记录下一个概念：浏览器内核。

曾经多次提到兼容问题，而在平时也经常碰到兼容问题，而这些问题的根本原因，就在于它：浏览器内核。这是比较通俗的说法，其实应该把它描述的专业点：Rendering Engine解释引擎，它负责网页语法进行解释，并对其内容和格式进行渲染（就是显示，用个词就感觉专业好多），而不同浏览器内核对网页语法的解释是不同的，就造成了所谓的“兼容问题”。

这里不多谈兼容的问题，但明白其原因，知晓其解决的一些办法就好了，而解决的最好办法就是，针对不同的内核编写不同的代码，当然针对具体的模块具体编写，这里先来介绍下浏览器内核的种类：

*Trident内核（IE内核）

*Gecko内核（Firefox内核）

*Webkit内核（Safari内核、chrome内核，开源）

*Blink内核（Google最新内核）

*Presto内核（Opera前内核）

而目前我们最常用的则是前三种，所以我们现阶段进行编写的话主要针对上面三种内核的浏览器观察效果就行

言归正传，开始打造我们自己的专属滚动栏，当然我们可以考虑不同的浏览器进行试验：

其实，如果说是对一个滚动栏最大的改变，就是一个：隐藏掉，从有到无，无中生有啊，几乎质的改变，我们不得不在这里提这么一下。

<span style="font-size:12px;">overflow:hidden;</span>

宏观上我们掌握了，接下来我们就开始那些细微之处的雕琢了，对于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同样可以实现这个，不过这里就不多说了，先让我偷乐会.....

哈，有点困了额，晚安

不一样就是不一样，我的专属滚动条------Day35,布布扣,bubuko.com

不一样就是不一样，我的专属滚动条------Day35

标签：css   scrollbar   学习记录   内核   

原文地址：http://blog.csdn.net/marsmile_tbo/article/details/30354305