jScrollbar: Customize your own scrollbar with jQuery UI

Had you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design ?

Make your own scrollbar design with jScrollbar !

jScrollbar is fully skinnable with CSS (you can use images instead) and can detect mousewheel event.

Download: https://github.com/SjaakZN/jScrollbar

Demonstration:

Plugin homepage:

Implementation:

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mousewheel.js"></script>
<script type="text/javascript" src="jScrollbar.jquery.js"></script>

2. ADD YOUR HTML

<!-- Main container -->
<div class="jScrollbar">
    <!-- Scrolling content container -->
    <div class="jScrollbar_mask">
        <p>
        <!-- Your long content here -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
        </p>
    </div>
    <!-- slider container -->
    <div class="jScrollbar_draggable">
        <!-- slider -->
        <a href="#" class="draggable"></a>
    </div>
    <!-- don't forget to clear the floats -->
    <div class="clr"></div>
</div>

3. NOW, CALL THE JSCROLLBAR PLUGIN

<script type="text/javascript">
    $(document).ready(function(){
    // simple jScrollbar plugin call
    $('.jScrollbar').jScrollbar();
    // more complex jScrollbar plugin call
    $('.jScrollbar').jScrollbar({
        scrollStep : 25,
        position : 'left',
        showOnHover : true
    });
});
</script>

Options:

position	String	Default : ‘right’ – Can be set to ‘left’ or ‘right’
showOnHover	Boolean	Default : false – If true, jScrollbar is displayed only on hover event
allowMouseWheel	Boolean	Default : true – Allow scrolling with the mousewheel
scrollStep	Integer	Default : 10 – Speed/step of the scrolling effect using the mousewheel

Screenshots: