CSS自定义滚动条样式与颜色

时间：2022-06-25 09:37:11 编辑：袖梨来源：一聚教程网

IE的专有属性：

代码如下

复制代码

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

浏览器右边默认的滚动条或许有点呆板。并且在不同操作系统平台（Mac OS，Win xp78）上也有不一致的展现。一般这也不算什么大问题，甚至不算什么问题。但是总有写时候你需要改变一下，为了突出个性而来点不一样的。比如像QQ音乐和我的个人主页。这里所讲的css定义滚动条样式只限于webkit浏览器，通过css的一些伪类来定义。

代码如下	复制代码
::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-button //滚动条两端的按钮 ::-webkit-scrollbar-track //外层轨道 ::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-thumb //（滚动条里面可以拖动的那个） ::-webkit-scrollbar-corner //边角 ::-webkit-resizer

//定义右下角拖动块的样式实际上还有很多更多的更丰富的伪类来控制滚动条样式，不过在以上列出的一些已经能够满足基本的需要了。

此外：

需要说明的是，IE浏览器其实是最早提供滚动条的样式支持的，但是其他浏览器并不买微软的账，所以只有IE才支持，并且个人以为IE那套实现的样式比较丑陋。有人开发了一套在线生成此样式的flash工具，想了解的同学可以移步这里。另外网上也有一些插件来实现自定义。如果你希望在多种浏览器都拥有一致的体验，可以尝试使用插件来实现。

一些Demo或代码：

代码如下

复制代码

::-webkit-scrollbar {
width:14px;
height:14px;
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07)));
background:-webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%);
background-color:rgba(229,229,229,.3);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
overflow:visible;
border-radius:4px;
border:solid 1px #A6A6A6;
}
::-webkit-scrollbar-button {
width:0;
height:0;
display:block;
background-color:transparent;
}
::-webkit-scrollbar-track {
}::-webkit-scrollbar-track-piece {
}::-webkit-scrollbar-thumb {
background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05)));
background:-webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%);
-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
box-shadow:0 2px 1px 0 rgba(0,0,0,.05),inset 1px 1px 0 0 #FFF;
background-color:rgba(229,229,229,.9);
overflow:visible;
border-radius:4px;
border:solid 1px #A6A6A6;
}
::-webkit-scrollbar-thumb:hover {
background-color:rgba(229,229,229,.4);
}
::-webkit-scrollbar-thumb:active {
background-color:rgba(229,229,229,1);
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;
box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset;
}
::-webkit-scrollbar-corner {
}
::-webkit-resizer {
}::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:black}
::-webkit-scrollbar-track-piece{background:#FFF}
::-webkit-scrollbar-thumb:vertical{background-color:#999;}
::-webkit-scrollbar-thumb:vertical:hover{background-color:#9f9f9f}
::-webkit-scrollbar-corner:vertical{background-color:#535353}
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

: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 等伪类同样可以用于滚动条中。

推荐专题

最新下载

热门教程

CSS自定义滚动条样式与颜色

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程