某人

此前素未谋面、此后遥遥无期

0%

浏览器滚动条样式

发表于 更新于 分类于

Chrome滚动条样式

CSS滚动条选择器
  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 整个滚动条 */
::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button    {
    background-color:blue;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track     {
    background:#000;
}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background:#ff0000;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb{
    background:#FFA711;
    border-radius:4px;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    background:green;
}
/* 某些元素的`corner`部分的部分样式(例:`textarea`的可拖动按钮). */
::-webkit-scrollbar-resizer  {
    background:#bf7326;
}
demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 整个滚动条 */
::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button    {
    /* background-color:blue; */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track     {
    background:#ccc;
}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background:#ccc;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb{
    width:80px;
    height: 80px;
    background:#999;
    border-radius:10px;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    background:#ccc;
    border-bottom-right-radius: 4px;
}
/* 某些元素的`corner`部分的部分样式(例:`textarea`的可拖动按钮). */
::-webkit-scrollbar-resizer  {
    /* background:#bf7326; */
}

FireFox滚动条样式

1
2
3
4
5
/* Only FireFox */
* {   
    scrollbar-color: transparent  transparent !important;
    scrollbar-width: thin;
}

IE滚动条样式

Scrollbar Properties 属性 CSS Version 版本 Compatibility 兼容性 Inherit From Parent 继承性 Description 简介
scrollbar-3d-light-color IE专有属性 IE5.5+ 有 设置或检索滚动条亮边框颜色
scrollbar-highlight-color IE专有属性 IE5.5+ 有 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color IE专有属性 IE5.5+ 有 设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color IE专有属性 IE5.5+ 有 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color IE专有属性 IE5.5+ 有 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color IE专有属性 IE5.5+ 有 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color IE专有属性 IE5.5+ 有 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整 
1
2
3
4
5
6
7
8
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; /*滚动条的基色*/

相关链接

  1. ::-webkit-scrollbar
  2. scrollbar-width firefox
  3. CustomCSSforFx
  4. CSS Scrollbar Properties滚动条属性IE