|
1
2
3
4
5
6
7
|
::-webkit-scrollbar
//滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。（位置1）
::-webkit-scrollbar-button
//滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。（位置2）
::-webkit-scrollbar-track
// 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）
::-webkit-scrollbar-track-piece
//内层轨道，滚动条中间部分（位置4）
::-webkit-scrollbar-thumb
//滚动条里面可以拖动的那部分（位置5）
::-webkit-scrollbar-corner
//边角（位置6）
::-webkit-resizer
//定义右下角拖动块的样式（位置7）
|
注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。
在Chrome中，滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性，你就像控制一般块级元素一样简单（强大啊）。
DEMO
Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师–Web前端学习之路(http://www.w3cways.com)
CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
#scroll-1{
width:200px;
height:200px;
overflow:auto;
}
#scroll-1div
{
width:400px;
height:400px;
}
#scroll-1::-webkit-scrollbar
{
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button
{
background-color:#FF7677;
}
#scroll-1::-webkit-scrollbar-track
{
background:#FF66D5;
}
#scroll-1::-webkit-scrollbar-track-piece
{
background:#ff0000;
}
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll-1::-webkit-scrollbar-corner
{
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer
{
background:#FF0BEE;
}
|
HTML
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<divid="scroll-1">
<div>
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)
Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)</div>
</div>
|
IE浏览器css设置滚动条（看下表）：
|
滚动条样式 |
支持情况 |
支持浏览器版本 |
可否继承 |
描述 |
|
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 |
设置滚动条轨迹组成部分的颜色 |
FIREFOX浏览器css设置滚动条（参照如下连接）：
http://bbs.kafan.cn/thread-1529981-1-1.html
https://www.w3cways.com/1670.html