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/

Answer 2

您还可以通过元素的 id 应用这些规则。假设 div 的滚动条必须设置样式，其 id 为“myDivId”。然后您可以执行以下操作。这样，您可以为不同元素的滚动条使用不同的样式。

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/

Answer 3

可以使用 jquery 插件或简单地设置带有 css 的滚动条样式。这可以在 webkit 和 ie 中完成。

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

http://jsfiddle.net/jeffpowrs/nEkPw/

http://css-tricks.com/custom-scrollbars-in-webkit/