多个自定义滚动条

时间:2013-03-10 17:36:54

标签: css scrollbar

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

Q1:有可能吗?

Q2:如果是这样,我该怎么做?

我考虑过一个解决方案,但我认为这有点麻烦。一种解决方案可能是使每个div包含一个iframe,然后使用唯一的滚动条创建单独的页面,但我不知道这是否会起作用..

3 个答案:

答案 0 :(得分:0)

可以使用jquery插件或只使用/ css设置滚动条样式。这可以在webkit中完成,即

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

答案 1 :(得分:0)

当然,您可以 - 只需将滚动条伪类添加到预期的选择器中,即:

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

答案 2 :(得分:0)

您还可以按元素的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/