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

Question

我试图通过发布一些css技巧问题(以及其他主题中的jquery技巧)来分享一些知识并回答它.
在这里,我正在处理为谷歌浏览器浏览器滚动条的样式.

Answer 1

这是一个使用 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/

Answer 2

只需添加以下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

以下是每条规则的作用: