css修改整個項目的滾動條樣式

在項目中，滾動條不可避免的藥出現。設置統一規範的滾動條也是必然。用一個獨立的css文件便可修改整個項目中的滾動條樣式 。

 

scrollBar.css:

/* 滾動條有滑塊的軌道部分 */
::-webkit-scrollbar-track-piece {
    background-color: #00000000;
    border-radius: 1px;
}

/* 整個滾動條 */
::-webkit-scrollbar {
    width: 6px;
    height: 100%;
}

/* 滾動條豎向滑塊 */
::-webkit-scrollbar-thumb:vertical {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 1px;
}

/* 滾動條豎向滑塊hover */
::-webkit-scrollbar-thumb:vertical:hover {
    background-color: rgba(255, 255, 255, .2);
}

/* 滾動條橫向滑塊 */
::-webkit-scrollbar-thumb:horizontal {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 1px;
}

/* 滾動條橫向滑塊hover */
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: rgba(255, 255, 255, .2);
}

/* 同時有垂直和水平滾動條時交匯的部分 */
::-webkit-scrollbar-corner {
    display: block;    /* 修復交匯時出現的白塊 */
}