Mobile drop-down refresh, Iscroll.js usage (reprint)

Sharing is the best way to spread and learn knowledge

"Author": Kicking the Front

"Source": http://www.cnblogs.com/duanhuajian/

"Disclaimer": All post headings Add (share) to the collection of outstanding articles from others, while the rest are original.

Official website: http://cubiq.org/iscroll-4

Overview

Iscroll 4 This version completely rewrites the original code of the Iscroll framework. This project was created entirely because of the mobile version of the WebKit browser (such as iphone,ipad,android are widely used on these systems)
Provides a localized way to slide the contents of an element that is limited in height and width. Unfortunately, in this case, all Web application pages cannot contain a position:absolute header, footer, or a content-scrollable
The middle area.
However, the latest revision of the Android system has been able to support this feature (although the strength of the support is not particularly good), Apple seems reluctant to apply the One-finger slide event to the DIV element.
In addition to the features of previous versions of Iscroll, Iscroll 4 includes the following features:
(1) Scaling (pinch/zoom)
(2) Pull-Up/down to refresh
(3) Speed and performance improvement
(4) precise capture of elements
(5) Custom scroll bar
Friendly tip: Iscroll 4 is not a simple alternative to Iscroll 3, the API documentation is different. While considering that this version is in beta, some APIs may change slightly.

User Guide

In this document you will find a number of examples to teach you how to quickly get started with the Iscroll script library. It may be a little boring to see the demo small example and read this document carefully, but this article is the essence of the Iscroll script library.
Iscroll needs to initialize the elements to be scrolled, and does not limit the number of elements in a page that use Iscroll (your hardware configuration is not considered here). The type and length of content in the scrolling element will, to some extent, affect the Iscroll script library
The number of elements that can be used at the same time.
When using the Iscroll script library, the structure of the DOM tree is simple enough to remove unnecessary tags and try to avoid excessive tag nesting.
The optimal structure for using Iscroll is as follows:

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

In this small example, the UL tag will be scrolled. Iscroll Be sure to contact the wrapper outside the scrolling content to produce an effect.
"Precautions":
Only the first child element in the wrapper can scroll, if you want more elements to scroll, then you can try this:

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

In this example, the scroller element can be scrolled, even if it contains two UL elements

Iscroll must be instantiated before the call, and you can instantiate the Iscroll in the following situations:

　　(1) using the Ondomcontentloaded event for scrolling

applies to scrolling content containing only text, pictures, and all of the pictures have a fixed size

<script src= "Iscroll.js" ></script>        <script>                var myscroll;                function loaded () {                           myscroll=new iscroll ("wrapper");                 }               Window.addeventlistener ("domcontentloaded", loaded,false);         </script>

Note: myscroll This variable is global, so you can call it anywhere

(2) using the OnLoad event for scrolling

because the domcontentloaded event is called after loading the DOM structure, it may not be possible to determine the width of the scrolling area before elements such as pictures are loaded, which can be accomplished using the OnLoad event.

<script src= "Iscroll.js" ><script>        <script>                    var myscroll;                    function loaded () {                   setTimeout (function () {                            myscroll=new iscroll ("wrapper");                     },100);                }                Window.addeventlistener ("Load", loaded,false);         </script>

In this case, Iscroll will be initialized after the page resource (including the picture) has finished loading 100ms, which should be a more secure way to call Iscroll.

(3) inline initialization

This is the case when the page is loaded into the JS call, this method is not recommended, but many JavaScript Daniel is in this way, I have no reason to disagree?

<script src= "Iscroll.js" ></script>                    <div id= "wrapper" >                            <ul>                                <li></li > ...                          </ul>                  </div>        <script>                   var myscroll=new iscroll ("wrapper");        </script>

However, it is recommended that you use some of the framework's ready methods to safely invoke Iscroll (such as ready () in jquery).

parameters passed in the Iscroll

　　The second parameter in Iscroll allows you to customize some of the content, such as the following code:

<script>        var myscroll=new iscroll ("wrapper", {hscrollbar:false, vscrollbar:false});       </script>

The second parameter is usually an object, as in the example above, the scroll bar is not displayed.the commonly used parameters are as follows:
HScroll false Disables horizontal scrolling true horizontal scrolling defaults to True
VScroll false Fine Vertical scrolling true vertical scrolling defaults to True
HScrollbar false to hide scroll bars in the horizontal direction
VScrollBar false to hide scroll bars in the vertical direction
Fixedscrollbar on an iOS system, when an element is dragged beyond the bounds of scroller, the scrollbar shrinks and set to true to prevent the scrollbar from exceeding
The visible area of the scroller. Default is true on Android, false on iOS
Fadescrollbar false to hide the scroll bar when no fade effect is specified
Hidescrollbar Hide scroll bar default to True when no user interaction
Bounce enable or disable bounce on boundary, default to True
Momentum enable or disable inertia, default is true, this parameter is useful when you want to save resources
Lockdirection false to unlock the drag direction, true to drag only in one Direction (Up/down or Left/right)

Implementation of various effects rolling refresh ' pull to refresh ' demo

This effect has become very popular since Twitter and some of Apple's localized apps have come to this effect. You can see the first glimpse here.
In the latest version, the author divides the "Pull to refresh" section as an additional plugin for iscroll. You can click here to see how pull-to-refresh works. All you have to do is customize the Pulldownaction () method. You may need an AJAX to load the new content, but once the DOM tree has changed, remember to call the Refresh method. It should be remembered that in the example we added a delay of 1 seconds to simulate the delay effect of the network. Of course, if you do not want to use this delay, then the SetTimeout method to remove the line.

Zoom (pinch/zoom) ' Pull to refresh ' demo

We have to face the fact that there is nothing new about light rolling. That's why in this version of Iscroll 4 we allow you to put
Yamato Zoom out. To do this, you only need to set the magnification parameter zoom to TRUE to zoom in and out using gestures. You can look here.
The ability to double-click Zoom in and zoom Out is also supported in Iscroll 4. To use the zoom feature, you need at least the following configuration:

var myscroll =new Iscroll ("wrapper", {zoom:true});

If you want to customize the zoom feature in depth, you can use some of the following options:
ZOOMMAX Specifies the maximum allowed magnification, which defaults to 4
"Caveats": if you want the image to scale well, put them in the composition layer of the hardware. In layman's terms, this is done using-webkit-transform:translate3d (0,0,0) on all the IMG elements that need to be scaled, and, most importantly, hardware acceleration can take up a lot of resources, so use it sparingly, or your app might crash.
Snap element (snap and Snap to Element) ' Carousel ' demo

The snap function is to determine whether the element is sliding to the specified position. With this effect you can make fancy marquee effects.

The plug-in automatically parses the same label or element of the same size in the scrolling area as a snap object, or you can specify the object to be captured by parameters

var myscroll=new iscroll ("wrapper", {                       snap:true, Momentum:false, Hscrollbar:false, VScrollBar                       : False                  });

You can set the snap parameter to a specified label to set the snapping object. such as capturing the Li tag.

var myscroll=new iscroll ("wrapper", {                      snap: "Li",                      Momentum:false,                      hscrollbar:false,                      VScrollBar: False                });

In this example, Scroller can capture the LI element in the top-left corner of the scrolling area

Customizing the scrollbar (custom scrollbars)
In this version of Iscroll 4, you can use a series of CSS to customize the rendering of the scroll bar. You can add a class parameter to the scroll bar, as follows:

var myscroll=new iscroll ("wrapper", {
Scrollbarclass: "Myscrollbar"});

A reminder is that the scrollbar is composed of two elements: a container and a monitor. The container is the same height as the wrapper, while the display represents the scroll bar itself.
The HTML structure of the scroll bar is as follows:

<div class= "Myscrollbarv" >                          <div></div>                  </div>                 . myscrollbarv{                           Position: absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;                  }                . Myscrollbarv > div {                           position:absolute;                           z-index:100;                           width:100%;                             /* The following is probably-want to customize *                           /background:-webkit-gradient (linear, 0 0, 100% 0, from (#f00 ), to (#900));                           border:1px solid #800;                          -webkit-background-clip:padding-box;                          -webkit-box-sizing:border-box;                          -webkit-border-radius:4px;                          -webkit-box-shadow:inset 1px 1px 0 rgba (255,255,255,0.5);                 }

General Method:

(1)refresh should call this method when the DOM tree has changed

Eg: setTimeout (function () {Myscroll.refresh ();}, 0);

(2)Iscroll also provides Scrollto, Scrolltoelement, and scrolltopage three methods that allow you to control the scrolling effect via JavaScript.

scrollTo (x, Y, time, relative): The position of the content scrollbar X/y within the specified time period. such as Myscroll.scrollto (0,-100, 200) the y-axis scrolls down 100 pixels within 200 milliseconds. myscroll.scrollto (0, ten, Max, true) can achieve the effect of scrolling up to 10 pixels in the y-axis relative to the current position within 200 milliseconds.

scrolltoelement (element, time): Scrolls to the specified element within the specified period. such as Myscroll.scrolltoelement (' Li:nth-child (10) ', 100) scrolls to the position of the 10th Li element within 100 milliseconds. The 1th parameter can be used to filter elements using selectors in CSS3.

snaptopage (PageX, Pagey, Time): Scrolls from 1th page to 2nd page (0 for 1th page and 1 for 2nd page) within 200 milliseconds. This function can be called when the snap function is used.

(3)DeTroy () completely eliminates myscroll and the memory space it occupies
Eg:myscroll.destroy ();

Myscroll = null;

The development direction of Iscroll

• Support for form fields
• Optimization of scaling
• Better compatibility with desktop browsers
• Optimization of Onscrol Events
• Change in the addition of a hash value
• Automatic refresh after DOM changes

Mobile drop-down refresh, Iscroll.js usage (reprint)