Skip to content

Instantly share code, notes, and snippets.

@zikkeung
Created August 2, 2013 03:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zikkeung/6137235 to your computer and use it in GitHub Desktop.
Save zikkeung/6137235 to your computer and use it in GitHub Desktop.
Thumb: 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) Track: 滚动条的轨道(里面装有Thumb) Buttons: 滚动条的轨道的两端,允许通过点击微调小方块的位置。 Corner: 两个滚动条的交汇处。 Resizer: 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。
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; /*滚动条的基色*/
::-webkit-scrollbar {
width:13px;
/*对垂直流动条有效*/
height:13px;
/*对水平流动条有效*/
}
/*垂直滚动条的按钮*/
::-webkit-scrollbar-button:vertical {
background-color:red;
border:1px dashed blue;
}
/*显示滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:start:decrement,/*显示滚动条下方的渐减按钮*/
::-webkit-scrollbar-button:end:increment {
display:block;
}
/*隐藏滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {
display:none;
}
/* 定义垂直滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:vertical:increment {
background-color:white;
border:1px dashed blue;
}
/* 定义垂直滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:vertical:decrement {
background-color:purple;
border:1px dashed blue;
}
/*  scrollbar-track    上面是 scrollbar-track-piece  */
/*  scrollbar-track-piece 上面是 四个按扭与scrollbar-track-piece:start与scrollbar-track-piece:end与scrollbar-thumb */
/* 垂直滚动条的第一层轨道*/
::-webkit-scrollbar-track:vertical {
background-color:blue;
border:1px dashed pink;
}
/* 垂直滚动条的第二层轨道 */
::-webkit-scrollbar-track-piece {
background-color:green;
}
/* 垂直滚动条的第三层轨道的上段 */
::-webkit-scrollbar-track-piece:vertical:start {
border:1px solid #000;
}
/* 垂直滚动条的第三层轨道的下段 */
::-webkit-scrollbar-track-piece:vertical:end {
border:1px dashed pink;
}
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar-thumb:vertical {
height:50px;
background-color:yellow;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
background-color:black;
}
/* http://www.cssportal.com/css-properties/resize.htm */
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color:orange;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment