所有我想知道的是,如果有可能在同一页面上有多个自定义的-webkit-滚动条..我制作一些div具体的颜色,就像一个div有绿色文本和图像,另一个蓝色等。所以我想为每个div制作一个自定义滚动条,使它与颜色匹配。多个自定义滚动条
Q1:有可能吗? Q2:如果是这样,我该怎么做?
我曾想过一种解决方案,但我认为这有点麻烦。一个解决方案可能是让每个div都包含一个iframe,然后用独特的滚动条创建单独的页面,但我不知道这是否会起作用。
所有我想知道的是,如果有可能在同一页面上有多个自定义的-webkit-滚动条..我制作一些div具体的颜色,就像一个div有绿色文本和图像,另一个蓝色等。所以我想为每个div制作一个自定义滚动条,使它与颜色匹配。多个自定义滚动条
Q1:有可能吗? Q2:如果是这样,我该怎么做?
我曾想过一种解决方案,但我认为这有点麻烦。一个解决方案可能是让每个div都包含一个iframe,然后用独特的滚动条创建单独的页面,但我不知道这是否会起作用。
当然,你可以 - 只是在前面加上滚动条的伪类与你预期的选择,即:
::-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/
谢谢..我完全忘了伪类。 – Dimser 2013-03-10 18:16:43
这是可能的使用jquery插件或只是样式滚动条w/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);
}
已经知道如何使自定义-webkit-scrollbar ..只是不知道如何使多个不同.. – Dimser 2013-03-10 18:19:07
也可以通过元素的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://stackoverflow.com/questions/7743840/apply-webkit-scrollbar-style-to-specified-element – polybios 2013-03-10 17:53:01