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:
