Usage: Instantiation

morands edited this page Feb 4, 2012 · 3 revisions

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.