为谷歌浏览器浏览器设置滚动条样式

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/