TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Mobile. It is meant to mimic “native” scrolling feeling and behavior as much as possible.
Switch branches/tags
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Demo: Changed icon for two-dimensional scrolling. Apr 30, 2010
dist New minified build Sep 3, 2010
src Android 2.2 ("Froyo") compatibility improvements: Sep 1, 2010
.gitignore Initial import into public repository. Apr 27, 2010
LICENSE Adding explicit LICENSE file May 31, 2011 Updating the readme. May 5, 2010


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 -->
<script src="css-beziers.js"></script>
<script src="touchscroll.js"></script>
    var scroller = new TouchScroll(document.querySelector("#scroller"));

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

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

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.

Limitations/Known Issues

  • 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?

To Do

  • 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 Twitter: @void_0