Native Scrolling on Touch Devices & Polyfilling

For those of us that have been developing mobile web applications or even making use of tools like PhoneGap to wrap HTML5 applications into native for deploying to various phones, a frequent "gotcha" has been scrolling.

Until recently, most mobile devices have handled web scrolling within a section or div quite poorly. Luckily, several browsers now support the CSS property: -webkit-overflow-scrolling. Simply set this to touch on whatever element you wish to scroll and presto!

.scrollingdiv{
-webkit-overflow-scrolling: touch; 
}

Like most good things on the web, we'll need to 'Polyfill' for all the loser browsers that aren't up to snuff. There are a number of folks out there who have put together great tools to help with this. Here are a few to get you started (my current favorite is Overthrow):

iScroll - http://cubiq.org/iscroll

Scrollability - http://joehewitt.github.com/scrollability/

Overthrow - https://github.com/filamentgroup/Overthrow/

For iScroll & Scrollability you'll need to test for native browser support on your own and only implement if the property isn't supported. Overthrow has a great way of testing to see if it is supported before it does its Polyfilling, although I prefer iScroll's actual polyfill approach to that of Overthrow.

Scroll to town!