Funky-Fresh Native Scrolling

Apple may or may not have introduced an update to iOS 5 that could maybe possibly have implemented a CSS property that could have the potential effect of introducing native scrolling onto HTML elements with overflow scrolling. That covers me on the NDA, right?

Okay, yes, there is a new CSS property, -webkit-overflow-scrolling. It exists. In the grand scheme of things, it’s minor, which is why I find it fit to mention. However, for web apps on mobile devices, it’s nothing short of revolutionary. While I don’t consider this here blog a webapp (he types while pointing sheepishly at your “Add To Home Screen” button), I do think it’s an important enough change to demonstrate. *cough*  Because I can. *cough* 

Of course, if you’re going to be OCD like me and say, well, fine, let’s make the whole damn site scrollable, there’s the ever-so-minor issue of anybody using a mobile device that doesn’t have native overflow scroll support, like any other iOS device on the planet. And, from what I hear, Android support for it is spotty. (I’ll refrain from making a snarky joke about that.) Before this property came out, the world was abuzz with a tiny JavaScript sample by Joe Hewitt (of Facebook fame; would you call it fame? I just recognize his name) called Scrollability. After 4 years, it finally gets an inertial scrolling algorithm right.

I decided to pair these up, both for use in general and here on Dizzy Technology. I’ve made an approximately 15-line change that cancels all the Scrollability stuff if you’re on a platform that supports WebKit overflow scrolling. The results are really cool, and you likely already see them if you’re reading this post. I encourage you to try the site on an iPad, because it’s pretty cool. It’s still pretty neat on a browser without overlay scrolling, too.

The code changes to Scrollability are available at my GitHub. I would also link to a code sample, but this site does (or, rather, did, depending on what regeneration of the site you see today) it really well (I’m OCD about web semantics, too!); just pull it up in Web Inspector.

5 months ago / 1 note