jQuery.scrollpanel

a simple vertical scrollpanel

licenseMITgithublrsjng/jquery-scrollpanelbowerlrsjng/jquery-scrollpanel
0.5.0

jQuery.scrollpanel replaces the native vertical browser scrollbar with a CSS-stylable custom scrollbar. This script is used in h5ai in the tree sidebar.

Examples

Usage

To convert a container element, for example a <div> tag, into a scrollpanel use:

$(selector).scrollpanel();

Assuming the container has a structur like this:

<div id="mycontainer">
    Some text content.
    <span class="bar"/>
    <div class="foo"/>
</div>

it will internally be transformed into that:

<div id="mycontainer">

    <div class="sp-viewport">
        <div class="sp-container">
            Some text content.
            <span class="bar"/>
            <div class="foo"/>
        </div>
    </div>

    <div class="sp-scrollbar">
        <div class="sp-thumb"/>
    </div>
</div>

Configuration

The only option that can be passed to the contructor is a class prefix which defaults to 'sp-'.

$(selector).scrollpanel({
    prefix: 'sp-'
});

Styles can freely be applied:

#mycontainer {
    width: 140px;
    height: 200px;
    border: 1px solid #ccc;

    .sp-scrollbar {
        width: 10px;
        margin: 4px;
        background-color: #ccc;
        cursor: pointer;

        .sp-thumb {
            background-color: #aaa;
        }
    }
    .sp-scrollbar.active
        .sp-thumb {
            background-color: #999;
        }
    }
}