css 改變滾動條樣式

1.滾動條組成　

 

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

2.滾動條樣式修改

/* 滾動條出現不出現 當摸個滾動條不想讓出現是可以這樣*/
#content_right::-webkit-scrollbar {
    display: none;
}
   /*樣式改變代碼-----------------------------------------------------*/
/* 滾動條整體部分 */
.topnav_box::-webkit-scrollbar   
{  
   width:10px;
   height:10px;     
   background-color:#d0cdc7;
}  
/* scroll軌道背景 */
.topnav_box::-webkit-scrollbar-track       
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px; 
    background-color:#d0cdc7;    
}

/* 滾動條中能上下移動的小塊 */
.topnav_box::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color:#a09d9d;
} 

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

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

html:

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

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

ul.ztree {

       margin-top: 10px;

       border-top: 0;

       background: white;

       width: 100%;

       height: 330px;

       overflow-y: auto;

       overflow-x: auto;//auto  為自動出現  scroll 為一直出現

}