jQuery.scrollpanel
simple vertical scrollpanel
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;
}
}
}