1. 程式人生 > >html自定義滾動條

html自定義滾動條

.treeview{
    position:absolute;
    width:241px;
    /* height:100%; */
    bottom:0;
    top:53px;
    overflow-y: hidden;
}
.treeview:hover{
    overflow-y: scroll;
}
.treeview::-webkit-scrollbar {            
    width: 7px;            
    /*高寬分別對應橫豎滾動條的尺寸*/            
    height: 7px;        
}        
/*定義滾動條軌道 內陰影+圓角*/                
.treeview::-webkit-scrollbar-thumb {            
    border-radius: 4px;            
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);            
    background: gray;        
}        
    /*定義滾動條軌道 內陰影+圓角*/                
.treeview::-webkit-scrollbar-track {            
    border-radius: 10px;            
    background: #fff;        
}        
    /*滾動條兩端的按鈕。可以用display:none讓其不顯示,也可以新增背景圖片,顏色改變顯示效果。*/                
.treeview::-webkit-scrollbar-button {            
    /* background: none;         */    
    display: none;    
}        
    /*邊角*/                
.treeview::-webkit-scrollbar-corner {            
    background: greenyellow;        
}        
    /*定義右下角拖動塊的樣式*/                
.treeview::-webkit-scrollbar-resizer {            
    background: white;        
}        
    /*內層軌道,滾動條中間部分(除去)。*/                
.treeview::-webkit-scrollbar-track-piece {            
    /*background: url(img/5.png);*/        
}