【转】打造个性化滚动条风格指南

更新:11-16 神话故事我要投稿纠错投诉

滚动条的组成：:-webkit-scrollbar 滚动条的整个部分

:-webkit-scrollbar-thumb 滚动条中的小方块可以上下左右移动（取决于是垂直滚动条还是水平滚动条）

:-webkit-scrollbar-track 滚动条轨道（里面有拇指）

:-webkit-scrollbar-button 滚动条轨道两端的按钮，可以通过点击来微调小方块的位置

:-webkit-scrollbar-track-piece内轨道，滚动条的中间部分（已删除）

:-webkit-scrollbar-corner 角点，以及两个滚动条的交集

:-webkit-resizer 两个滚动条交叉处的小控件，用于通过拖动来调整元素大小

自定义滚动条的简单版本：

/*定义滚动条的宽度、高度和背景。宽度和高度分别对应水平和垂直滚动条的大小*/

.scrollbar:-webkit-scrollbar{

宽度： 16px；

高度： 16px；

背景颜色： #f5f5f5;

}

/*定义滚动条的轨道、内阴影和圆角*/

.scrollbar:-webkit-scrollbar-track{

-webkit-box-shadow: 插入0 0 6px rgba(0,0,0,3);

边框半径： 10px；

背景颜色： #f5f5f5;

}

/*定义滑块、内阴影和圆角*/

.scrollbar:-webkit-scrollbar-thumb{

/*宽度： 10px;*/

高度： 20px；

边框半径： 10px；

-webkit-box-shadow: 插入0 0 6px rgba(0,0,0,3);

背景颜色： #555;

}前段时间，我在网上找资料的时候，看到了一种非常独特的滚动条样式。我打开Chrome的调试工具看了一下。我发现它不是用JavaScript模拟的，所以我觉得有必要玩一下它。所以我在各大浏览器中进行了比较，发现它只适用于Chrome，这意味着这个使用了Chrome的私有CSS属性。经过一番研究，我发现不仅仅是Chrome使用，其他浏览器都不同程度地支持自定义滚动条样式。以下是我不断测试的结果。如果有错误或不完整的地方，请在评论中留言，我会立即改正。如果你有更好的解决方案，可以留言，让大家擦亮眼睛。

自定义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 设置滚动条轨道组件的颜色

在这里写下图片描述。为了帮助理解IE中滚动条样式的控制，可以查看以下图片：

在这里写下图片描述。经过不断的测试，我发现在Win8下，有些样式起到的作用是一样的。估计是由于Win8扁平化的界面设计，系统中的滚动条被重新设计了！下面是Win 8下的滚动条样式，CSS支持都写出来了：

这里写一下图片描述1、上面写的四个CSS属性足以控制Win 8系统下IE浏览器的滚动条样式。不过经过测试，发现其他四个属性还是支持的（主要是以上属性空着的时候，它们的效果才会体现出来）。详情如下：

2.关于scrollbar-track-color、scrollbar-face-color和scrollbar-base-color。直接看英文单词，你也许能明白，scroll-base-color是一种备份颜色，只要前两个没有设置，它就开始起作用。但要注意的是，当scrollbar-base-color用作scrollbar-track-color函数时，你会发现实际的颜色比设置的颜色要浅。如果你不信，你可以试试这个：只要设置scrollbar-base-color就可以看到滚动条的效果了。

关于scrollbar-dark-shadow-color属性，通过测试发现Win 8下IE10和IE11的滚动条没有变化。可能是win 8的滚动条被重新定义了，导致没有隐藏阴影！（仅个人猜测）

3.通过观察，我们发现Win 8下的滚动条中，向上箭头和向下箭头后面的背景颜色已经与scroll-face-color分离，并由scroll-track-color属性控制。

感觉IE浏览器的滚动条的定制功能不是很强。它只能控制显示各部分的颜色。宽度、结构等无法控制。很难依赖个性化的滚动条！很难！

自定义FireFox浏览器滚动条我在网上搜索了很多关于如何在Firefox中自定义浏览器滚动条，但发现在Firefox中不支持。找到几篇文章说可以改，就跟着代码写了好几遍（不知道是我写错了还是……），结果发现不行。以下是一些小收获：

@-moz-文档url 前缀(http://),url 前缀(https://) {

/* 滚动条颜色*/

滚动条{

-moz-appearance: 无！重要；

背景： rgb(0,255,0) !重要；

}

/* 滚动条按钮颜色*/

拇指，滚动条按钮{

-moz-appearance: 无！重要；

背景颜色： rgb(0,0,255) !重要；

}

/* 鼠标悬停时按钮颜色*/

拇指：悬停，滚动条按钮：悬停{

-moz-appearance: 无！重要；

背景颜色： rgb(255,0,0)！重要；

}

/* 隐藏上下箭头*/

滚动条按钮{

display: 无！重要；

}

/* 垂直滚动条宽度*/

滚动条[东方="垂直"] {

最小宽度： 15px！重要；

}

}上面的代码根据实际测试是不行的。但可能是我的浏览器版本不对！你可以尝试一下，如果有效的话，你可以在文章评论中贴出你的FF版本。

webkit内核的浏览器滚动条定制在所有浏览器中，自定义滚动条最多的无疑是基于webkit的浏览器。由于源码开源，很难详尽列出市面上所有基于webkit内核的浏览器。例如：Google Chrome、Opera（opera最近宣布将使用webkit内核）、360极速浏览器、猎豹浏览器等、搜狗浏览器.

让我们看看webkit浏览器有多强大！

CSS

:-webkit-滚动条{ /* 1 */}

:-webkit-滚动条按钮{ /* 2 */}

:-webkit-scrollbar-track { /* 3 */}

:-webkit-scrollbar-track-piece { /* 4 */}

:-webkit-scrollbar-thumb { /* 5 */}

:-webkit-scrollbar-corner { /* 6 */}

:-webkit-resizer { /* 7 */} 上述CSS 代码所管辖的区域对应关系：上面注释中的数字与下图中的数字相对应。

在这里写下图片描述。上图如下：

:-webkit-scrollbar是滚动条的整体部分。它的属性包括宽度、高度、背景、边框（就像块级元素一样）等。

:-webkit-scrollbar-button 滚动条两端的按钮。您可以使用display:none来阻止其显示，也可以添加背景图片和颜色来改变显示效果。

:-webkit-scrollbar-track 外轨道。您可以使用display:none来阻止其显示，也可以添加背景图片和颜色来改变显示效果。

:-webkit-scrollbar-track-piece 内轨道，滚动条的中间部分（已移除）。

:-webkit-scrollbar-thumb 滚动条可拖动的部分

:-webkit-滚动条-角角

:-webkit-resizer 定义右下角拖动块的样式

注意：定义上述各部分的宽度和高度时。它有以下功能：如果是水平滚动条，则width属性不起作用，而height属性用于控制滚动条相应部分的垂直高度；如果是垂直滚动条，height属性不起作用，用width属性来控制相应部分。宽度。

能通过以上连续测试。在Chrome中，滚动条的各个部分与DOM中的块级元素相同。传递：-webkit-scrollbar等与CSS中原始选择器类似。至于{}中的属性，你可以像普通的块级元素一样轻松控制它们（强大）。

这里写的图片描述对应的源码如下：

CSS部分代码：

#scroll-1 {

宽度：200px；

高度：200px；

溢出：自动；

}

#scroll-1 div {

宽度：400px；

高度：400px；

} #scroll-1:-webkit-scrollbar {

宽度：10px；

高度：10px；

}

#scroll-1:-webkit-scrollbar-button {

背景颜色：#FF7677;

}

#scroll-1:-webkit-scrollbar-track {

背景：#FF66D5;

}

#scroll-1:-webkit-scrollbar-track-piece {

背景：url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);

}

#scroll-1:-webkit-scrollbar-thumb{

背景：#FFA711；

边框半径：4px；

}

#scroll-1:-webkit-scrollbar-corner {

背景：#82AFFF；

}

#scroll-1:-webkit-scrollbar-resizer {

背景：#FF0BEE；

}HTML 结构：

请选择Webkit核心的浏览器才能正常看到滚动条的变化。

小世界，大世界是一个Web前端技术博客。主要是关于