多个自定义滚动条

Question

我想知道的是是否可以在同一页面上有多个定制的 -webkit-scrollbars..我制作了一些特定的 div 颜色，例如一个 div 有绿色文本和图像，另一个有蓝色等。所以我想为每个 div 制作一个自定义滚动条，使其与颜色匹配。

Q1: 有可能吗？

Q2：如果是这样，我该怎么做？

我想过一种解决办法，但我觉得有点麻烦。一种解决方案可能是让每个 div 包含一个 iframe，然后使用独特的滚动条创建单独的页面，但我不知道这是否会起作用。

Answer 1

当然，您可以 - 只需在滚动条伪类前面添加您想要的选择器，即：

::-webkit-scrollbar-track {
    background-color: #333;
}

/* Override styles for <div>s, for example */
div::-webkit-scrollbar-track {
    background-color: #b13131;
}

我在这里为你做了一个简单的例子 - http://jsfiddle.net/teddyrised/Nsz93/