Usage: Instantiation

If you are not using the minified file, please make sure you’ve met the Prerequisites.

Create a Scrolling Layer

To create a scrolling layer, you need an element on your page that has a fixed height (so that it does not grow infinetely). To make that element scrollable, simply create a TouchScroll instance:

    <div id="my-scroller"><!-- Lots of content here … --></div>

    var elem = document.getElementById("my-scroller");
    var myScroller = new TouchScroll(elem);

Scroller Options

TouchScroll has a few options that can be set at instantiation time:

• elastic – Whether to show the bouncing effect. Defaults to false.
• scrollevents – Whether to fire DOM scroll events during scroll. Defaults to false.
• snapToGrid – Whether to snap to a 100%×100%-grid – aka “paging mode”. Defaults to false.
• scrollbars – Whether to show scrollbars. Defaults to true (always false in snapToGrid-mode).

If you want to use any of these options, pass an object as second parameter to the TouchScroll-Constructor:

    var myScroller = new TouchScroll(elem, {
        elastic: true, // for bouncing effect
        scrollevents: true // DOM scroll events should be fired
    });

What to do next?

Check the Usage: Scroller API page to explore how to manipulate the scroller programmatically.