Scrollbar the awesome way

Scared of horizontal / vertical scrolls showing up on your website ? or the vertical ones ! I will show some awesome way to spice-up your website with some HTML5 looking scrollbar + jQuery that will even work in Internet Explorer 6  (0.O)

jquery scrollbar + CSS I used in one of my projects

With jQuery and jscrollpane you can add some beautiful scrollbar to your website. ‘jScrollPane’ is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

Download Source : Click here 

# How to use:

Between HEAD tag of html page.

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function()
{
	$('.scroll-pane').jScrollPane();
});
</script>

Now in the BODY section of the page create teh DIV with some content with a class named .scroll-pane

<div class=".scroll-pane">
 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
 </div>
 

Thats all, You can style the CSS the way you want. If you want horizontal scrolls set the width of DIV more than the wrapper DIV.

You can post comments if you need any help.

DEMO : View here

- Ajinkya