使用scrolls窗格插件设置2个不同卷轴的样式

Question

我需要有2个不同的滚动条2种不同的css样式..这个插件工作完美，但它将相同的css放到所有的滚动条中。

我所做的..。

我复制了管理滚动样式的css和js文件，并更改了所有类和变量的名称。把2放在前面..

然后..。在index.html中..我初始化了$(Document).ready(){ $('.scroll-pane2').jScrollPane222()；$(‘.scroll-pane2’).jScrollPane()；...

其中，jScrollPane222是.js中将管理scroll#2的函数的名称。我在正确的滚动div (class="scroll-pane2")和(class=“scroll-pane2”)中输入了正确的类名。

并引用了js和css。

(此css具有适用于这两者的样式规则。例如:有.2jspContainer和2jspContainer)

它仍然使用滚动窗格的css规则设置样式。

你知道有没有办法使用这个插件来设计2种不同样式的滚动条？

谢谢你，苏珊娜

Answer 1

要做到这一点，有一种方法比你所描述的要容易得多，那就是修改你的css文件来区分两个滚动窗格。例如，假设您的第一个窗格位于id为one的div中，第二个窗格位于id two的div中。您可以在您的css中包含以下内容：

#one .jScrollPaneDrag{
    background: #f00;   
}

#two .jScrollPaneDrag{
    background: #0f0;   
} 

示例如下：http://jsfiddle.net/KCDax/