自定義 Chrome 滾動條的樣式

有不少可以幫你修改Chrome默認滾動條樣式的擴展，Scroll Bar X就是其中的佼佼者，但是這個擴展在安裝的時候提示說會存取所有的網站數據，這就讓人感覺很難以接受了。其實咱們可以自己動手，豐衣足食。首先在自己的系統里找到如下這個.css文件：

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Chromium:
%LOCALAPPDATA%\Chromium\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

用任何一款文字編輯器打開之，加入以下代碼：

::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:0;
}
::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-thumb{
    height:50px;
    background-color:#999;
    -webkit-border-radius:4px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
    height:50px;
    background-color:#9f9f9f;
    -webkit-border-radius:4px;
}

保存之后重新打開你的Chrome瀏覽器，看到變化了吧？其實這些都是基礎的CSS代碼，所以你可以隨心所欲的定制。比如你覺得滾動條太細了，即可編輯以下這段代碼里的寬度：

::-webkit-scrollbar{
    width:16px;
}

另外，其實Chrome的Web Inspector也是可以通過修改CSS來定制頁面風格的，其CSS文件地址：

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css