教你自定義谷歌瀏覽器的滾動條樣式

谷歌瀏覽器界面的簡潔,我想不用多說了吧,從我第一次用谷歌瀏覽器就被這界面迷住了,我真的找不到比這界面更好看、簡潔到極致的瀏覽器了。你說火狐速度快、好用是麼,可是那界面,我真的放棄了。我玩遊戲也是這樣,如果裡面的人物太醜(WOW?)或者遊戲不是3D的,那麼再好玩我也玩不下去(事實上我玩遊戲好多玩不懂,主要看裡面的世界的,找不到樂趣)。chrome貌似設計理念就是留給網頁儘量大的顯示面積。但是還是有人不滿滾動條那麼寬,於是做了一個插件來把滾動條變窄以留給網頁更多的空間,那插件我試過,不過用過後感覺那滾動條是1px也太細了吧,有時候都拖不到了。然後上次在chrome迷裡面看到介紹改滾動條的,當然第一時間就要拿過來學習。改過後覺得很滿意

工具/原料

Windows XP(要顯示隱藏文件夾):

C:\Documents and Settings\你的用戶名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets

Windows(7\8):

系統盤:\Users(用戶)\你的用戶名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/你的用戶名/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

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

方法/步驟

用記事本打開custom.css文件,複製下面的代碼

/*---滾動條默認顯示樣式--*/

::-webkit-scrollbar-thumb{

background-color:#018EE8;

height:50px;

outline-offset:-2px;

outline:2px solid #fff;

-webkit-border-radius:4px;

border: 2px solid #fff;

}

/*---滑鼠點擊滾動條顯示樣式--*/

::-webkit-scrollbar-thumb:hover{

background-color:#FB4446;

height:50px;

-webkit-border-radius:4px;

}

/*---滾動條大小--*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

/*---滾動框背景樣式--*/

::-webkit-scrollbar-track-piece{

background-color:#fff;

-webkit-border-radius:0;

}

把以上代碼粘貼到custom.css文件裡面,保存後重啟谷歌瀏覽器,滾動條就會變成這樣

當然,你也可以自己修改,顏色大小圓角那些。

CSS裡面hover是設置滑鼠放上連結的顏色,同樣的,active也可以設置滑鼠點擊的顏色,只要到上面的代碼添加如下代碼就行了。

::-webkit-scrollbar-thumb:active{

height:50px;

background-color:#000;

-webkit-border-radius:4px;

}

大家知道谷歌瀏覽器支持css3,所以這裡關於css3的樣式大家都去找來試試吧。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場