jQuery.ui.vScroll

This is designed vertical scrollbar with jQuery UI Slider

Required Framework

• jQuery (developed with jQuery 1.5)
• jQuery UI Slider (developed with jQuery UI 1.8.11)

Usage

JavaScript example

$(function () {
/* $(some selector).vScroll() */
$('.mod_vScroll').vScroll({
    sliderWrapperClassName: "sliderWrap",
    sliderClassName: "sliderVertical"
});
});

HTML example

<div class="mod_vScroll"><-- Scroll wrapper -->
<div class="content"><-- Scroll contents -->
<!-- Some vertical scroll contents here -->
</div>

<!-- Slider (generated from JavaScript) -->
<div class="sliderWrap"><!-- Slider wrapper. "sliderWrap" class is optional -->
<div class="sliderVertical ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><!-- "sliderVertial" class is optional -->
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all"></a><!-- Scroll handle -->
</div>
</div>

</div>

CSS example

/* ".mod_vScroll" is specified by jQuery selector */
.mod_vScroll {
    position: relative;
    width: 200px;
    height: 300px;
}
/* ".content" is fixed */
.mod_vScroll .content {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.mod_vScroll ul li {
    list-style-type: none;
    margin-bottom: 10px;
}

/* ".sliderWrap" is optional */
.sliderWrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    background-color: #eee;
}
/* ".sliderVertical" is optional */
.sliderVertical {
    position: relative;
    height: 100%;
}
/* ".ui-slider-wrap" is fixed */
.ui-slider-handle {
    display: block;
    position: absolute;
    width: 12px;
    height: 10px;
    cursor: default;
    border: 1px solid #999;
}