HTML5模拟原生APP上拉加载，下拉刷新

<h1 id="intro">iScroll, smooth scrolling for the web</h1> iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. It works on desktop, mobile and smart TV. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike. iScroll does not just *scroll*. It can handle any element that needs to be moved with user interaction. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. Give it a broom and it will also clean up your office. Even on platforms where native scrolling is good enough, iScroll adds features that wouldn't be possible otherwise. Specifically: * Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller. * Animation can be customized with user defined easing functions (bounce, elastic, back, ...). * You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...). * Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer. <h2 id="iscroll-versions">The many faces of iScroll</h2> iScroll is all about optimization. To reach the highest performance it has been divided into multiple versions. You can pick the version that better suits your need. Currently we have the following fragrances: * **iscroll.js**, it is the general purpose script. It includes the most commonly used features and grants very high performance in a small footprint. * **iscroll-lite.js**, it is a stripped down version of the main script. It doesn't support snap, scrollbars, mouse wheel, key bindings. But if all you need is scrolling (especially on mobile) *iScroll lite* is the smallest, fastest solution. * **iscroll-probe.js**, probing the current scroll position is a demanding task, that's why I decided to build a dedicated version for it. If you need to know the scrolling position at any given time, this is the iScroll for you. (I'm making some more tests, this might end up in the regular `iscroll.js` script, so keep an eye on it). * **iscroll-zoom.js**, adds zooming to the standard scroll. * **iscroll-infinite.js**, can do infinite and cached scrolling. Handling very long lists of elements is no easy task for mobile devices. *iScroll infinite* uses a caching mechanism that lets you scroll a potentially infinite number of elements. <h2 id="getting-started">Getting started</h2> So you want to be an iScroll master. Cool, because that is what I'll make you into. The best way to learn the iScroll is by looking at the demos. In the archive you'll find a `demo` folder [stuffed with examples](https://github.com/cubiq/iscroll/tree/master/demos). Most of the script features are outlined there. `IScroll` is a class that needs to be initiated for each scrolling area. There's no limit to the number of iScrolls you can have in each page if not that imposed by the device CPU/Memory. Try to keep the DOM as simple as possible. iScroll uses the hardware compositing layer but there's a limit to the elements the hardware can handle. The optimal HTML structure is: ```html <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> ``` iScroll must be applied to the wrapper of the scrolling area. In the above example the `UL` element will be scrolled. Only the first child of the container element is scrolled, additional children are simply ignored. <div class="tip"> <p><code>box-shadow</code>, <code>opacity</code>, <code>text-shadow</code> and alpha channels are all properties that don't go very well together with hardware acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing lag and jerkiness.</p> <p>Sometimes a background image to simulate the shadow performs better than <code>box-shadow</code>. The bottom line is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.</p> </div> The minimal call to initiate the script is as follow: ```html <script type="text/javascript"> var myScroll = new IScroll('#wrapper'); </script> ``` The first parameter can be a string representing the DOM selector of the scroll container element OR a reference to the element itself. The following is a valid syntax too: ```js var wrapper = document.getElementById('wrapper'); var myScroll = new IScroll(wrapper); ``` So basically either you pass the element directly or a string that will be given to `querySelector`. Consequently to select a wrapper by its class name instead of the ID, you'd do: ```js var myScroll = new IScroll('.wrapper'); ``` Note that iScroll uses `querySelector` not `querySelectorAll`, so only the first occurrence of the selector is used. If you need to apply iScroll to multiple objects you'll have to build your own cycle. <div class="tip"> <p>You don't strictly need to assign the instance to a variable (<code>myScroll</code>), but it is handy to keep a reference to the iScroll.</p> <p>For example you could later check the <a href="#scroller-info">scroller position</a> or <a href="#destroy">unload unnecessary events</a> when you don't need the iScroll anymore.</p> </div> <h2 id="initialization">Initialization</h2> The iScroll needs to be initiated when the DOM is ready. The safest bet is to start it on window `onload` event. `DOMContentLoaded` or inline initialization are also fine but remember that the script needs to know the height/width of the scrolling area. If you have images that don't have explicit width/height declaration, iScroll will most likely end up with a wrong scroller size. <div class="important"> <p>Add <code>position:relative</code> or <code>absolute</code> to the scroll container (the wrapper). That alone usually solves most of the problems with wrongly calculated wrapper dimensions.</p> </div> To sum up, the smallest iScroll configuration is: ```html <head> ... <script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new IScroll('#wrapper'); } </script> </head> ... <body onload="loaded()"> <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> </body> ``` Refer to the [barebone example](http://lab.cubiq.org/iscroll5/demos/barebone/) for more details on the minimal CSS/HTML requirements. <div class="tip"> <p>If you have a complex DOM it is sometimes smart to add a little delay from the <code>onload</code> event to iScroll initialization. Executing the iScroll with a 100 or 200 milliseconds delay gives the browser that little rest that can save your ass.</p> </div> <h2 id="configuring">Configuring the iScroll</h2> iScroll can be configured by passing a second parameter during the initialization phase. ```js var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true }); ``` The example above turns on mouse wheel support and scrollbars. After initialization you can access the *normalized* values from the `options` object. Eg: ```js console.dir(myScroll.options); ``` The above will return the configuration the `myScroll` instance will run on. By *normalized* I mean that if you set `useTransform:true` (for example) but the browser doesn't support CSS transforms, `useTransform` will be `false`. <h2 id="the-core">Understanding the core</h2> iScroll uses various techniques to scroll based on device/browser capability. **Normally you don't need to configure the engine**, iScroll is smart enough to pick the best for you. Nonetheless it is important to understand which mechanisms iScroll works on and how to configure them. ### <small>options.</small>useTransform By default the engine uses the `transform` CSS property. Setting this to `false` scrolls