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!
- 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):
You can find a series of examples and the documentation of iScroll on their official page.