jScrollPane is a cross-browser jQuery plugin 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.
How to use
It is very simple to use JScrollPane. You will need to download the necessary files and place them on your server. Then you just need to include the relevant files in the <head> tag of your document.
You can get needed file by downloading attached file below clicking on Download Link
Screen shot :
Here is the example :
CSS
//styles needed by jScrollPane
<link href="CSS/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
Script Path
//styles needed by jScrollPane
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
//latest jQuery direct from google's CDN
<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.10.2/jquery.min.js">
</script>
</script>
Script
//Call the jScrollPane
<script type="text/javascript">
$(document).ready(function() {
$('.MultipleDivScroll').jScrollPane();
});
</script>
$(document).ready(function() {
$('.MultipleDivScroll').jScrollPane();
});
</script>
Body
//body demo content for jScrollPane
<body>
<div align="center" style="width: 100%;">
<h1>
Facebook Style JScroll Pane</h1>
<div align="left" id="divScrollPane" class="MultipleDivScroll" style="width: 180px;
height: 300px; border: solid 0px; outline: none !important;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
</div>
</div>
</body>
Facebook Style JScroll Pane</h1>
<div align="left" id="divScrollPane" class="MultipleDivScroll" style="width: 180px;
height: 300px; border: solid 0px; outline: none !important;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam.</p>
</div>
</div>
</body>
Download Link
If you have any query comment will be appreciated :)
