TouchScroll is a JavaScript/CSS 3-based scrolling layer for Webkit Mobile, espeacially iPhone, Android, and iPad. It allows to configure scrolling behaviour in many ways and to use fixed interface elements.

TouchScroll depends on css-beziers, a library for computations on cubic bezier curves.

To use TouchScroll you need an element with fixed height. Have a look at the demo for an elegant solution using display: -webkit-box.

The stylesheet is mandatory at the moment. It will be made optional in the future for cases when scrollbars aren’t needed.

<link rel="stylesheet" src="touchscroll.css">
<!-- … -->
<div id="scroller">
    <!-- contents go here -->
</div>
<script src="css-beziers.js"></script>
<script src="touchscroll.js"></script>
<script>
    var scroller = new TouchScroll(document.querySelector("#scroller"));
</script>

To enable the elasticity/bouncing effect, add {elastic: true} as second parameter to the instantiation:

<script>
    var scroller = new TouchScroll(document.querySelector("#scroller"), {elastic: true});
</script>

Set the scroller to overflow: auto to enable scrolling in other environments.

The scroller automatically adapts its size to content changes and window resizes/orientation changes.

• TouchScroll currently doesn’t work well with forms on Android.
• The scroller element shouldn’t have any padding.
• Because two wrapper <div>s are inserted inside of the scroller, the CSS child selector (#scroller > foo) might not work as expected.
• When a scroller is invisible, it can’t adapt its size correctly. Call its setupScroller method to fix that (e.g. after making a scroller visible by setting display: block on it).
• Tapping the status bar on iPhone doesn’t trigger “scroll to top”.
• Selecting text doesn’t work on the iPad and on some iPhone versions (OS 4.0b2) – an issue with cancelling events?

• Keep the scrollbars round while bouncing – I already know how to do this.
• Investigate whether support for tapping the status bar on iPhone can be added.
• Investigate how selecting text and using the context menu can be re-enabled on iPhone/iPad.
• Add an option to completely switch off scrollbars.
• Find a solution to the event problems on Android – help greatly appreciated!

E-Mail: da AT uxebu.com Twitter: @void_0