Related questions about Lscroll ~

This example is more common on the Internet, the next time, pull-down refresh is added static elements, I added Ajax, there is a style problem, after refreshing the scroll bar length unchanged, but the content length has changed, not reach the bottom. The browser height must be changed to make the scroll bar normal.

Just set Ajax to sync. $.ajax ({async:false,)

Iscroll Framework Introduction

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) ondomcontentloaded

(2) OnLoad

(3) Inline mode

Let's talk about the pros and cons of each of these three uses.

ondomcontentloaded

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

How to use: (Add the following code to the head tag)

        <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 its function onload anywhere

Sometimes it is a bit hasty to initialize the Iscroll in the domcontentloaded state, so the resources on the page may not be fully loaded at this time. If you're having some weird behavior, you can try the following:

        <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.

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 the scroll bar in the horizontal direction               VScrollBar         False to hide the scrollbar on the vertical fixedscrollbar on the  iOS system, when the element is dragged beyond the bounds of the scroller, The scrollbar is shrunk and set to true to prevent                                        the scrollbar from exceeding the visible area of the scroller. The default is true on Android, False Fadescrollbar on iOS  specifies that scrollbars are hidden when no fade effect               hidescrollbar Hide scroll bars when  there is no user interaction The default is True               bounce            enable or disable bounce on boundary, default is 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)

To maintain the integrity of the resource, it is recommended to remove the ScrollBar pull refresh (draw to refresh)

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.

I recently separated the "Pull to refresh" section as an extra 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)

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)

The snapping feature prompts the scroller to redefine the position, which makes for a more fancy belt effect. Click here for a small example.

By default, Iscroll divides scroller into four, or wrapper of the same size. Iscroll 4 adds this property to allow capturing of any element in the scroller, regardless of the size of the external wrapper. If you want to achieve such a belt effect, I suggest you use the "quadrant" split. The best settings are as follows:

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

The capture element can be passed as a query condition by passing a string, as follows:

                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"                 });

You can click here to see a small example, in this small example, Myscrollbarh This class is added to the horizontal scroll bar, Myscrollbarv This class is added to the vertical direction of the scroll bar. 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;t                  op:2px;right:1px;                           }. Myscrollbarv > div {position:absolute;                           z-index:100;                             width:100%;  /* The following is probably what do you 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) When refresh is                          changed in the DOM tree, this method     (2) ScrollTo () should be called                     to scroll to a location               eg:myscroll.scrollTo (0,10,200,true);     (3) Scrolltoelement ()      scrolls to an element               eg:myscroll.scrolToElement ("Li:nth-child");     (4) DeTroy ()                       completely eliminates myscroll and the memory space it occupies                Eg:myscroll.destroy ()

Related questions about Lscroll ~