Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

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.
branch: rewrite-v2

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.