Of Stack

Learn to use the jquery iScroll.js mobile scrollbar plug in

  • 2021-01-06 00:25:31
  • OfStack

What are the most common plugins that people use in their daily work, jQurey? Lazyload? But this is all on the PC side, but the most commonly used plug-in on mobile is iScroll. What is iScroll and how should I use it? ES6en is a very powerful plugin, and I've only scratched the surface of it, so here's a quick overview.

Generation of iScroll:

iScroll was created solely because of the mobile version of the webkit browser, for example on iPhone, Android mobile devices.

Usage of iScroll:

The principle of the iScroll is that the outer layer has an overflow hide (overflow:hidden;). DOM, then first DOM structure in this area can be instantiated, the content of the package can be vertical or horizontal scrolling, so when using iScroll, rolling element as far as possible simple, decrease the number of DOM reduce nested, because the more complex iScroll DOM structure to run the more demanding, may cause some nodes show abnormal situation. Therefore, the recommended DOM structure is as follows: 


<div id="wrapper">//overflow:hidden;
 <ul>
 // Only the first 1 a DOM Structure ( ul ) is instantiated, this DOM You can scroll either vertically or horizontally, 
 // The extra content will be wrapper The style of the hidden . 
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
</div>

Note: Once again, only the first child of wrapper (ul) can be instantiated to scroll, and it must be combined with the outer DOM (wrapper) to scroll.
What if there are more than one ul in wrapper? Only the first child element (ul) in wrapper can be instantiated to scroll: 


<div id="wrapper">//overflow:hidden;
 <div id="first">
 // Only the first 1 a DOM structure (ul) It's instantiated. This DOM You can scroll either vertically or horizontally, 
 // The extra content will be wrapper The style of the hidden
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ul>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>
 </div>
</div>

See, only ES46en will be instantiated. Note: the structure of the first DOM ID (first) can not write, I only write in order to facilitate everyone to identify a ID, but the outermost ID (wrapper) 1 to write, because need to fill out the ID when JS instantiation: 


var myScroll = new iScroll("wrapper");

How iScroll should be instantiated:

Now that we're talking about instantiation, when should we instantiate? It is said that there are many methods of instantiation, but I have not used them, I will only mention 1:
(1) At the bottom of HTML (uw3c.html) page (after body before html) load iscroll.js and the current page of uw3c.js, so as to ensure that HTML structure can be loaded out.
(2) Instantate iScroll at the beginning of JS before it inserts DOM structures and data into the page, since it is possible to use JS to insert DOM or data later. This ensures that iScroll is instantiated before the data is inserted.

HTML: / / HTML structure 


<html >
 <body>
 ...code...
 </body>
 // insert iscroll.js file 
 <script type="text/javascript" src="js/iscroll.js" > </script >
 // Insert this page JS file 
 <script type="text/javascript" src="js/uw3c.js" > </script >
</html>

JS:// The contents of JS file 


var myscroll;
 function iscroll(data){
 // instantiation iScroll
 myscroll=new iScroll("wrapper");
 pageData(data);
 }
 function pageData(obj){
 $("body").html(obj);
 myscroll.refresh();// when DOM You need to refresh when the structure changes iScroll
 }
 iscroll("<div>pagedata</div>");

Parameters in iScroll:

When instantiating iScroll, we can pass in two arguments. The first argument is the ID of the outer DOM instantiated, and the second argument is the object of the iScroll execution method: 


var myscroll=new iScroll("wrapper",{hScrollbar:false});
 or 
var opts = {
 vScroll:false,// Disallow vertical scrolling 
 snap:true,// Implement the conveyor belt effect 
 hScrollbar:false// Hide the horizontal scroll bar 
 };
var myscroll = new iScroll("wrapper",opts);

The second parameter, which controls the effect of iScroll, is as follows: 


hScroll false  Disallow lateral scrolling  true Horizontal scroll   The default is true
vScroll false  Disallow vertical scrolling  true Vertical scroll   The default is true
hScrollbar false Hide the horizontal scroll bar 
vScrollbar false  Hide scroll bars in the vertical direction 
fadeScrollbar false  Specifies that scrollbars are hidden when there is no fade effect 
hideScrollbar  Hide the scroll bar when there is no user interaction   The default is true
bounce  Enables or disables bounces of boundaries, default to true
momentum  Enables or disables inertia, default is true This parameter is useful when you want to save resources 
lockDirection false Unlock the drag direction, true Drag can only be 1 In the direction of ( up/down  or left/right )

Methods in iScroll:

Of course, there are several methods that can be performed in the second parameter:
(1)scrollTo(x, y, time, relative) method: pass in 4 parameters: X axis rolling distance, Y axis rolling distance, effect time, whether relative to the current position. So for example: 


// in 200 In milliseconds, Y Axial scrolling 100 Pixel; 
uw3c.scrollTo(0, -100, 200)
// in 200 For milliseconds, relative to the current position, X The axis rolls to the left 100 Pixel; 
uw3c.scrollTo(-100, 0, 200, true)

(2)refresh() method: After the DOM structure is changed, it is necessary to refresh iScroll, otherwise the scrolling plug-in will instantiate inaccurately: 


uw3c.refresh();// The refresh iScroll

(3)onPosChange, is there a way to return the change of position? You can query 1 iScroll own use under any onPosChange method: 


onPosChange:function(x,y){
 if(y < -200){
 // if Y Circumferential scrolling 200 Pixels, $("#uw3c") Show it, or hide it. 
 $("#uw3c").show();
 }else{
 $("#uw3c").hide();
 }
}

(4) onScrollEnd: Event executed at the end of a scroll. This method is useful if you want to start an event at the end of a scroll: 


<div id="wrapper">//overflow:hidden;
 <div id="first">
 // Only the first 1 a DOM structure (ul) It's instantiated. This DOM You can scroll either vertically or horizontally, 
 // The extra content will be wrapper The style of the hidden
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ul>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>
 </div>
</div>
0

(5) onRefresh: It is necessary to refresh iScroll after the DOM structure is changed, otherwise the scrolling plug-in will not instantiate accurately. onRefresh is the method that will be performed after refreshing iScroll.
(6) onBeforeScrollStart: Time callback before starting scrolling, default is to prevent the default browser behavior.
onScrollStart: Calling back to start scrolling.
(8) onBeforeScrollMove: Callback before content move.
onScrollMove: Callback for content movement.
onBeforeScrollEnd: Callback before the end of the scroll.
(11) onTouchEnd: The callback after the hand is off the screen.
onDestroy: Callback for instance destruction.

That's the end of this article. I hope it will help you to use the iScroll.js mobile scrollbar plug-in.

Related articles: