JQuery Scroll Pane

How to Use Scroll Pane.

Part 1 – Setup

You will need to include three Javascript files in your header in this order.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="js/jScrollPane.js"></script>

Include this CSS files.

<link rel="stylesheet"  type="text/css" href="css/demoStyles.css" />
<link rel="stylesheet"  type="text/css" href="css/jScrollPane.css" />

Part 2 – Activate

1) To activate scroll pane we need to follow these steps. Add this script on your HTML head section-

Step 1

<script type="text/javascript">
	$(function()
	{
		// this initialises the demo scollpanes on the page.
		$('#pane').jScrollPane({showArrows:true});
	});
</script>

Step 2

<div>
   <h3>#pane2</h3>
	<div id="pane">
		<p>>
		Lorem ipsum
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 

		</p>
		<p>
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		</p>
		<p>
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		</p>
	    <p>
	    Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
		Lorem ipsum 
	  <</p>
	</div>
</div>

2) We have to add these two div’s holder and scroll-pane at outside of content div. Now pass the id=”pane” in the div scroll-pane.