1.滾動條組成　

• ::-webkit-scrollbar 滾動條整體部分
• ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
• ::-webkit-scrollbar-track 滾動條的軌道（裏面裝有Thumb）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
• ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
• ::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件

2.滾動條樣式修改

 1 /* 滾動條出現不出現 當摸個滾動條不想讓出現是可以這樣*/
 2 #content_right::-webkit-scrollbar {
 3     display: none;
 4 }
   /*樣式改變代碼-----------------------------------------------------*/
 5 /* 滾動條整體部分 */
 6 .topnav_box::-webkit-scrollbar   
 7 {  
 8    width:10px;
 9    height
 
:10px;     
10    background-color:#d0cdc7;
11 }  
12 /* scroll軌道背景 */
13 .topnav_box::-webkit-scrollbar-track       
14 {  
15     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
16     border-radius: 10px; 
17     background-color:#d0cdc7;    
18 }
19 
20 /* 滾動條中能上下移動的小塊 */
21 .topnav_box::-webkit-scrollbar-thumb  
 
22 {  
23     border-radius: 10px;  
24     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
25     background-color:#a09d9d;
26 } 

 /*樣式改變代碼-----------------------------------------------------*/

使用是 頁面元素有滾動的條的要有這個類

html:

<ul id="treemx" class="ztree topnav_box"></ul>

css: 同時css要有滾動的代碼

css 改變滾動條樣式