Ever want to replicate the iPhone scrolling experience in your browser? Well I thought it would be a novel idea so I whipped together a small jQuery plug-in that turns any overflowed block element into a scrollable pane. I have also taken the liberty of adding two mouse cursors that, for those of you that use Adobe products, might recognize from Photoshop for scrolling across a workspace.

To use the script, download the project archive and include either the full or minified version into your markup source.

   <script type="text/javascript" src="jquery.overscroll.js"></script>

It does not really matter where you include the overscroll script as long as you can be sure it is loaded after your jQuery include. Also, make sure to take note that the archive comes packed with cursors so that scrollable areas are more obvious. If you plan on using these cursors, make sure to set the correct paths for your server within the script:

 // cursor locations
var open_hand = "url(open.cur), default";
var closed_hand = "url(closed.cur), default";
  

Next, you should select the elements you want to turn into scrollers via jQuery and then initiate the overscroll plug-in to turn those elements into scroll panes

 $(function(){
    $("ul.overscroll").overscroll();
});
  

Clicking and dragging will make the overflowed list scroll, flicking will send the list into a short drift.

I plan on eventually adding iPhone-esqe scroll bars to the plug-in, as well as potentially a smoother scrolling experience. Its still a work in progress, but I hope you are able to still find that it meets your needs. As a final note, if anyone out there knows a better implementation for iPhone scrolling, please contact me so that I can port it to JavaScript.

Demo: http://azoffdesign.com/plugins/js/overscroll
Download: http://svn.xp-dev.com/svn/ad.dev/overscroll/jquery.overscroll.zip
Source: http://azoffdesign.com/plugins/js/overscroll

Related Listings:

1. iPhone Style Checkboxes Progressively enhance your forms by turning boring old checkboxes into...
2. jQuery Flick This plugin adds Apple iPod/iPhone (firmware 2.0+) flick/scroll functionality to...
3. iPhone Interface in Javascript This script can generate and embed Iphone like interface on...
4. iPhone Toggle Switches for Prototype Framework Way back in June, Thomas Reynolds released iPhone-style-checkboxes for...
5. iPhone Checkboxes Using MooTools One of the sweet user interface enhancements provided by Apple’s...

Do you like this post?

Email: