Search code examples
jqueryhtmlcssjscrollpane

How to add 2 jScrollPane to my page and each one has different CSS?

I have on my page 2 DIVs that uses jScrollPane and I want each one to have its own track bar, by default this property exist in CSS file and applied to the 2 DIVs.

I want to add a specific track bar to the second DIV without interacting withe first one.

How I can do that?

Thanks

Solution

  • Wrap the second scroll pane in an element with a class or an id and then target your CSS rules to tracks nested inside that.

    e.g. (assuming that you are using jScrollPane 2):

    <div id="wrapper">
    <div class="scroll-pane">
        [content]
    </div>
</div>

    Then in the CSS:

    #wrapper .jspTrack
{
    background: red;
}

    This will only effect the track within the div with an id of "wrapper".

    Hope it helps!