Styling 2 different scrolls with jscrollpane plugin

I need to have 2 different css styles for 2 different scrollbars .. this plugin works perfect but it put the same css to all of the scrollbars.

What I did ..

I made a duplicate of the css and js files that manage the scroll styling and changed all the classes and variables names .. putting a 2 in front..

Then .. in index.html .. I initialized $(document).ready(function() { $('.scroll-pane2').jScrollPane222(); $('.scroll-pane').jScrollPane();...

where jScrollPane222 is the name of the function in the .js that will 开发者_JAVA技巧manage scroll#2 . I put the correct class name in the correct scrolled divs (class="scroll-pane2") and (class="scroll-pane")..

And referenced the js's and css

(this css has the styles rules for both .. for example: it has .2jspContainer and 2jspContainer)

It is still styling both with the css rules for scroll-pane..

Do you know if there's a way to use this plugin to style 2 scroll bars with 2 different styles?

Thank You, Susana

One way of doing this which is considerably easier that what you've described, is to modify your css file to distinguish between the 2 scrollpanes. For instance, let's say your first pane is within a div with id of one and the 2nd is in a div with id two. You could have this in your css:

#one .jScrollPaneDrag{
    background: #f00;   
}

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

example here: http://jsfiddle.net/KCDax/