chrome自定義滾動條樣式

chrome內核瀏覽器可以修改滾動條樣式，只需要幾句css即可實現，下面列出常用的修改樣式：

// 滾動條整體寬度
::-webkit-scrollbar {
    width: 8px;
}
// 滾動條滑槽樣式
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
}
// 滾動條樣式
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #ddd;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover{
    background: #ccc;
}
::-webkit-scrollbar-thumb:active{
    background: #999;
}
// 瀏覽器失焦的樣式
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}