Skip to content


Subversion checkout URL

You can clone with
Download ZIP
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.
Pull request Compare This branch is 178 commits ahead, 11 commits behind master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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? [Update] Some code changed since these issues have been reported. Could anybody whith access to those devices/versions re-test it?

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

Something went wrong with that request. Please try again.