css - 多个自定义滚动条

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/