google chrome浏览器的样式滚动条

Question

我试图通过张贴一些css技巧问题(以及另一个主题中的jquery技巧)来分享一些知识，并回答它。

这里我要处理的是google chrome浏览器的滚动条的样式。

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/