css - 谷歌浏览器的样式滚动条

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/