jScrollbar : make your own scrollbar for scrolling contents with jQuery UI
jScrollbar description
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 can be full CSS skinnable (you can use images instead) and can be combined with the mousewheel.
jscrollbar download package
- jScrollbar v1.6
- jquery
- jquery.js
- jquery-ui.js
- jquery-mousewheel.js
- jScrollbar.jquery.js
- jScrollbar.jquery.min.js
- jScrollbar.jquery.css
- images
- bg_slider4.png (only for exemple 4)
- bg_draggable4.png (only for exemple 4)
- bg_draggable5.png (only for exemple 5)
- index.php
- jquery
jscrollbar 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>
Who use jScrollbar on the web ?
If you use jScrollbar Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)
How can you help us ?
If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !
Last News
QapTcha 4.1
Wed 7th MarchNew option 'autoSubmit' : auto submit form when the user has dragged it to end.