Learn how to use the jqueryiScroll. js mobile-side scroll bar plug-in _ jquery

This article describes jqueryiScroll in detail. how to Use the js mobile scroll bar plug-in and iScroll. js usage considerations, interested friends can refer to what is the most common plug-in daily work, jQurey? Lazyload? But these are all on the PC, but the most common plug-ins on the mobile end are iScroll. What exactly is iScroll and how should it be used? IScroll is a powerful plug-in, and I just want to understand it. here we will briefly introduce it.
Generation of iScroll:

IScroll is generated entirely because of the mobile webkit browser, such as on iPhone and Android mobile devices.
How to Use iScroll:

The principle of iScroll is that the outer layer has an overflow: Den den; DOM, and the First DOM structure in this region will be instantiated, the content of the package can be rolled vertically or horizontally. Therefore, when using iScroll, the scrolling elements should be as simple as possible, reducing the number of DOM and nesting, the more complicated the DOM structure iScroll is to run, the more difficult it is to run. It may cause some nodes to display abnormal conditions. Therefore, we recommend that you use the following DOM structure:

// Overflow: hidden;
 
 

  
  
// Only the first DOM structure (ul) is instantiated. This DOM can be rolled vertically or horizontally. // The extra content will be hashed by the wrapper style.
  
  
1
  
  
  
2
  
  
  
3
 
 
 

Note: It is reiterated that only the first child element (ul) in wrapper can be instantiated and rolled only when it is combined with the outer DOM (wrapper.
What if there are multiple ul in wrapper? It's easy to remember that only the first sub-element (ul) in wrapper can be instantiated and rolled:

// Overflow: hidden;
// Only the first DOM structure (ul) is instantiated. This DOM can be rolled vertically or horizontally. // The extra content will be hashed by the wrapper style.
 
 
   
  
  
1
   
  
  
2
   
  
  
3
  
 
 
  
 
 
   
  
  
4
   
  
  
5
   
  
  
6
  
 
 
 

As you can see, only first will be instantiated. Note: The ID (first) of the first DOM structure can be left empty. I only wrote an ID for your convenience, but the ID (wrapper) of the outermost layer must be written, because this ID is required during JS instantiation:

var myScroll = new iScroll("wrapper");

How Should iScroll be instantiated?:

Now that we have talked about instantiation, when should we instantiate it? It is said that there are many instantiation methods, but I have never used them. I only say one:
(1)at the bottom of the html (uw3c.html) page (before HTML after body) Load iscroll. js and uw3c. js of the current page, so that the html DOM structure can be loaded.
(2) instantiate iScroll before JS inserts the DOM structure and data on the page, that is, it is instantiated at the beginning of JS, because later JavaScript may be used to insert dom or data, this ensures that iScroll has been instantiated before data is inserted.

HTML: // HTML Structure

 ... Code...// Insert the iscroll. js File// Insert the JS file on this page

JS: // JS File Content

Var myscroll; function iscroll (data) {// instantiate iScroll myscroll = new iScroll ("wrapper"); pageData (data);} function pageData (obj) {$ ("body" 2.16.html (obj); myscroll. refresh (); // when the DOM structure changes, you need to refresh iScroll} iscroll ("
Pagedata
");

Parameters in iScroll:

When instantiating iScroll, two parameters can be passed in. The first parameter is the ID of the DOM of the outer layer of the instantiation, and the second parameter is the object of the iScroll execution method:

Var myscroll = new iScroll ("wrapper", {hScrollbar: false}); or var opts = {vScroll: false, // disable vertical scrolling snap: true, // execute the conveyor belt effect hScrollbar: false // hide the scroll bar in the horizontal direction}; var myscroll = new iScroll ("wrapper", opts );

The second parameter contains the following content, which controls the effect of iScroll:

HScroll false disable horizontal scroll true default truevScroll false disable vertical scroll true vertical scroll default truehScrollbar false hide horizontal scroll bar vScrollbar false hide vertical scroll bar fadeScrollbar false specified in hide the scroll bar hideScrollbar when there is no user interaction hide the scroll bar by default truebounce enable or disable boundary bounce, the default value is truemomentum, which enables or disables inertia. The default value is true. This parameter is useful when you want to save resources, true: The drag can only be performed in one direction (up/down or left/right)

Methods In iScroll:

Of course, some methods can be executed in the second parameter:
(1) scrollTo (x, y, time, relative) method: Input four parameters: x axis rolling distance, y axis rolling distance, effect time, whether relative to the current position. For example:

// Within 200 milliseconds, the Y axis is scrolled up to 100 pixels; uw3c. scrollTo (0,-100,200) // within 200 milliseconds, the X axis rolls 100 pixels to the left relative to the current position. uw3c. scrollTo (-100, 0,200, true)

(2) refresh () method: After the DOM structure is changed, refresh iScroll; otherwise, the rolling plug-in will be instantiated incorrectly:

Uw3c. refresh (); // refresh iScroll

(3) onPosChange: is there a way to return location changes? You can query whether the onPosChange method in iScroll is used:

OnPosChange: function (x, y) {if (y <-200) {// if Y rolls 200 pixels up every week, $ ("# uw3c") is displayed, otherwise, it will be hidden. $ ("# Uw3c"). show () ;}else {$ ("# uw3c"). hide ();}}

(4) onScrollEnd: The Event executed at the rolling end. If you want to touch an event at the rolling end, this method is useful:

// The method to be executed after the scroll ends. A prompt box will appear after the scroll. alert ("uw3c.com") onScrollEnd: function () {alert ("uw3c.com ");}

(5) onRefresh: After the DOM structure changes, you need to refresh iScroll. Otherwise, the rolling plug-in will be instantiated incorrectly. onRefresh is the method that will be executed after iScroll is refreshed.
(6) onBeforeScrollStart: The time callback before the rolling starts. By default, the browser's default behavior is blocked.
(7) onScrollStart: indicates the callback that starts rolling.
(8) onBeforeScrollMove: the callback before the content is moved.
(9) onScrollMove: callback for content movement.
(10) onBeforeScrollEnd: the callback before the rolling ends.
(11) onTouchEnd: the callback after the hand leaves the screen.
(12) onDestroy: callback for instance Destruction.

The above is all the content in this article. I hope it will be helpful for you to use the iScroll. js mobile-side scroll bar plug-in skillfully.