多个自定义滚动条 [英] Multiple custom scrollbars

问题描述

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

All I want to know is if it is possible to have multiple custom made -webkit-scrollbars on the same page.. I making some divs color specific, like one div has green text and images and another blue etc. So I would like to make a custom scrollbar for each div so it matches the color..

Q1：可能吗？

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

Q2: If so, how would I do it?

我已经想过一个解决方案，但我认为这有点麻烦。一个解决方案可能是使每个div包含一个iframe，然后创建单独的页面与独特的滚动条，但我不知道是否将工作。

I have thought about one solution, but I think it is a bit cumbersome. One solution may be to make each div containing an iframe and then create separate pages with the unique scrollbars, but I don't know if that is going to work either..

推荐答案

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

Of course you can - simply prepend the scrollbar pseudo-classes with your intended selectors, i.e.:

::-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/

这篇关于多个自定义滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！