TouchScroll
TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Touch (yes, that includes Android). It is meant to mimic “native” scrolling feeling and behavior as much as possible.
This demo works best on iPhone, iPad and in WebKit Nightly. Safari 4 kind of works, too.
A JavaScript-based scroller?
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.
How is it done?
TouchScroll uses a combination of JavaScript and CSS 3. All animations are done with CSS transitions – no JavaScript intervals. 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.
On Safari mobile TouchScroll benefits from hardware acceleration for CSS transforms and transitions, which allows for very smooth scrolling. Android hasn’t any hardware support, which makes the animations choppier than on Apples devices.
Updating the scroller
The scroller updates its dimensions and position automatically on window resizes (window.onresize), orientation changes (window.onorientationchange) and DOM modifications inside the scroller (DOMSubtreeModified event). It only needs to be updated manually when it wasn’t visible on initialization (or last update) as soon it is made visible again.
Customization
TouchScroll allows you to customize many aspects of the scrolling behavior. The following aspects are configurable:
- minimum scrolling offset – to prevent unintended scrolling, a minumum offset can be defined. It defaults to 5 pixels.
- Flicking behavior: maximum duration between the last move event and the release event that triggers flicking. The default is 150 ms.
- Average friction and bezier curve for the flicking animation (CSS transition)
- Elasticity at the borders, and the maximum bounce length when flicking.
- The snapback duration and its timing function.
Get it!
TouchScroll is released under a BSD license. You can find more information on how to get TouchScroll on our blog.
More info
For more information contact me via mail, follow me on twitter (@void_0) and watch out for the TouchScroll blog post on our blog.
Photo: “olympic montage 01” by Daveybot – cc licensed.