Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



23 Commits

Repository files navigation


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


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.







No packages published