jQuery.scrollpanel

simple vertical scrollpanel

licenseMITgithublrsjng/jquery-scrollpanelnpmjquery-scrollpanelbowerlrsjng/jquery-scrollpanel
0.7.0

jQuery.scrollpanel replaces the native vertical browser scrollbar with a CSS-stylable custom scrollbar. To enable mouse wheel support also include jQuery.mousewheel (MIT). Some examples can be seen in this little demo.

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;
        }
    }
}
Works best with JavaScript enabled!Works best in modern browsers!