谷歌鉻瀏覽器的造型滾動條

Question

我想通過發佈一些CSS技巧問題（和另一個主題中的jQuery技巧）來分享一些知識並回答它。
在這裏，我正在處理谷歌鉻瀏覽器的滾動條樣式。

Answer 1

只需添加這些CSS規則：

1. ::-webkit-scrollbar
2. ::-webkit-scrollbar-button
3. ::-webkit-scrollbar-track
4. ::-webkit-scrollbar-track-piece
5. ::-webkit-scrollbar-thumb
6. ::-webkit-scrollbar-corner
7. ::-webkit-resizer

這裏的每一條規則做什麼：

Answer 2

下面是使用CSS

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

這裏是如何將看起來定製滾動條的一個簡單的例子。

裁判：https://css-tricks.com/custom-scrollbars-in-webkit/