iScroll 4 on mobile devices

iScroll is used to scroll contents inside a fixed width/height element.

Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile. Doesn’t work on IE!

Features:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

How to include iScroll in your project:

Step 1. Download the JS file on iScroll 4 page.

Step 2. The HTML markup

You can add how many iScrolls you want in a page, but remember to initialize every one of them. Try to keep the DOM structure as simple as possible.

<div id="wrapper">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

In this example, the wrapper is static, and the ul is the scrolling element. If you want to have multiple scrolling elements, you need to nest them in a single element, because only the first child of the wrapper element is scrolled. For that you have the following example:

<div id="wrapper">
  <div class="scroller">
    <ul>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Step 3. The initialization

Even if the demos you download on iScroll 4 have a different initialization, use the following (because on mobile devices, the header will be fixed with the initialization in the demos):

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
  var myScroll;
  function loaded() {
    myScroll = new iScroll('wrapper');
  }
  document.addEventListener('DOMContentLoaded', loaded, false);
</script>

You can find a series of examples and the documentation of iScroll on their official page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s