Enable JScrollPane Scrolling for iPad and iPhone

jScrollPane is a cross-browser jQuery plugin which converts a browser’s default scrollbars into an HTML structure which can be easily skinned with CSS. The scrollbars look really sleek. The only issue was that JScrollPane did not work with the content displayed on iPad/iPhone.

After some search and hackery, I found some posts and finally could manage to make it work with iPad. Make sure you use JScrollPane version 2.0.

Include these files in your web page:

 
<!-- styles needed by jScrollPane -->
<link type="text/css" href="http://jscrollpane.kelvinluck.com/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="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>

The actual javascript file for jScrollPane, include the Updated jScrollPane file from here:

 
http://www.nathanbuskirk.com/jquery.jscrollpane.js

Following is the functional demo:

You can view it here in new window.

Hope that helps.

Cheers!

Related posts:

1. How To Fix iPhone/iPad Mobile Safari Greyed out and Disabled File Upload Control
2. Resolve Mobile Safari Greyed out File Field Issue in iPhone/iPod/iPad by using Picup App to upload images
3. Using the UIScrollbar component with TextField in Flash AS3 for scrolling text
4. Enable Auto Update for WordPress Plugins and Core Files without FTP, FTPS or SSH2
5. Resolve Jquery Mobile Framework Zoomed Out Text and Font Size Problem on iPhone