Tuesday, April 27th, 2010

TouchScroll: Implementing scroll physics in JS and CSS

Category: Mobile


David Aurelio of the awesome Uxebu has been working on TouchScroll, a library that implements scrolling in a way that mimics the native scrolling of a device such as an iPhone, Android, or Pre.

Other libraries such as jQtouch and the Mojo library itself (used in Ares) do this work too in their own worlds. Why did they do this?

While Safari Mobile features native scrolling, there are two reasons to re-implement scrolling with JavaScript: The original scrolling behavior is rather slow – we were looking for a solution that feels more fluid. And the viewport behavior of Mobile Safari and other mobile browsers using WebKit doesn’t allow for fixed positioned elements.

TouchScroll uses a combination of JavaScript and CSS?3. All animations are done with CSS transitions – no JavaScript timeouts. That means, the deceleration animation can be configured with a bezier curve.

The elasticity effect when crossing the scroller bounds is achieved by dividing the bezier curve into two sub-curves using my (yet to be finished) CSS Bezier library for JavaScript.

For fun, make sure to resize the window on the demo to a much smaller and then larger size…. and change the font size too :) Nice work. This is the kind of thing that really enables cross device support as devices slowly catch up with one another.

You can learn a lot about how to test for various scroll/mobile capabilities from David’s clean code too.

Update: David has released TouchScroll on GitHub and blogged about it here.

Posted by Dion Almaer at 6:10 am

4.2 rating from 6 votes


Comments feed TrackBack URI

You’re missing http:// for the TouchScroll link…

Comment by cope — April 27, 2010

Thank you for the interest in TouchScroll. I’ve just released it on github: http://github.com/davidaurelio/TouchScroll

Make sure to check the related blog post: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/

Comment by void0 — April 27, 2010

Leave a comment

You must be logged in to post a comment.