Chrome 应用程序中的自定义滚动条

Question

我想使用 CSS 规则 #2 自定义 Chrome 应用程序的滚动条：

section { overflow: auto }
section::-webkit-scrollbar {
    width: 5px ;
}

不幸的是，使用第二条规则，Chrome 将不会显示滚动条。 如果没有第二条规则，默认滚动条将按预期显示。

这是正常行为吗？ 我检查了文档，但没有发现任何内容...

Answer 1

我相信在您描述如何使用 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb

显示它之前它是不可见的

CSSTricks 将此列为最小示例：

::-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); 
}