webkit瀏覽器css設置滾動條：
|
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-1
div {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
|
<div
id="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 | 設置滾動條軌跡組成部分的顏色 |