ISCROLL4 upgrade to iscroll5 all tips notes

Some time ago in the mobile Terminal (mobile Web) project, which requires the use of scrolling functionality (HTML scrolling effect is not good, and is not supported on the lower version). Behind the Internet to find the next information, found that most people are using ISCROLL4 (hereinafter referred to as V4), download down to try it really good. The scrolling effect on the PC is OK, in the integration into the mobile web, in some models (or part of the system version) on the lag, not very smooth, it may be low configuration, it is possible that some property settings error caused by sliding is not smooth. The back of the Internet to find information, found ISCROLL5 (hereinafter referred to as V5) test version (bate5.0.1) has come out, decisive download down play (address: http://cubiq.org/iscroll-5-ready-for-beta-test)

But V5 and V4 gap is a bit big, for those who want to upgrade to V5 friends, may take some time to see the source to do the corresponding upgrade adjustment (because the official has not had the relevant documents out), today I use some of the functions of the upgrade adjustment mode and note the point about (the author did not go to see all the source code, Just ISCROLL4 used before the function of the corresponding adjustment), nonsense not much to say, start!

1, the first is the iscroll of the method of instantiation

V4   var new iscroll (' id ');    V5  varNew

I changed to uppercase, it should be to standardize the wording. The following target is changed from the original only DOM object or ID to support the DOM object and selector selection, the source of choice is Document.queryselector (EL), and is no longer document.getElementById (EL);

2, V5 no longer add Overflow:hidden to the target, users have the need to add their own

3. The V5 event is no longer written in option, but is a way to mimic the on-bound event of jquery.

1 V42 varScroller =NewIscroll (' id ',{  3Scrollstart:function(){  4Onsole.log (' scroll started '); 5      }  6 }); 7   8 V59 varScroller =NewIscroll (' #id '); TenScroller.on (' Scrollstart ',function() {console.log (' scroll started ');});

4, v4 to get the index of the current page what is through This.currpagex or This.currpagey, and V5 is placed in this.currentpage, such as to get the horizontal index of the current page This.currentPage.pageX;

The event call that scrolls to a page in V4 is Scrolltopage (x,y,time), while the V5 is GoToPage (x,y,time,easing), easing is the new addition of the V5 to the boundary when the response effect, here does not elaborate, You can try it yourself, note: If you add a special effect, the Scrollend event will not be triggered (beta version may not add support, the author has left a message to the Iscroll author), such as in the V4 to achieve pull load more events, you can not add effects, Otherwise you will find that the pull-up load more logic will not be executed.

5, V5 test version of the event is less, a lot of events have not been added, such as V4 in the Scrollmove also did not, because the project needs, I temporarily in the source _move function of the last side added support

1 // Add an event extension during the scrolling process, currently only Scrollstart, Scrollend, refresh, three events are extended  in this version . 2 // if a new version of this event is added in the future, it can be replaced accordingly (the name is written casually, as long as it is the same as  the name of the event bound by the use) 3 this. _execevent (' Scrollmove ');   4 // End Add  

6. V5 default horizontal scrolling is disabled, vertical is enabled by default, and V4 is enabled by default.

7, V4 can be set by the following parameters of the option to control when scrolling scroll bar, the end of the scroll to hide the scroll bar, V5 can not be implemented (in fact, many options are different, or there is no support, maybe later will be added slowly, after all, now just beta version)

true ,  hidescrollbar  true

View Code

You can now use the following code to temporarily implement

1 varIsobj =NewIscroll (obj,opt); 2                   3 //Scroll bar is displayed when scrolling, end of scroll is hidden4Isobj.on ("Scrollend",function(){  5     if( This. Indicator1) {  6          This. indicator1.indicatorstyle[' transition-duration '] = ' 350ms '; 7          This. indicator1.indicatorstyle[' opacity '] = ' 0 '; 8     }  9 }); TenIsobj.on ("Scrollmove",function(){   One     if( This. Indicator1) {   A          This. indicator1.indicatorstyle[' transition-duration '] = ' 0ms ';  -          This. indicator1.indicatorstyle[' opacity '] = ' 0.8 ';  -     }   the});

8, v4 Default if the content does not exceed the display area, there will be no scroll bar, even if the finger past scrolling, there will be no reaction, even if you set the scroll bar default display, he will not appear scroll bar. V4 Even if the content is relatively small, but you go to scroll, there will be a rebound to the border back effect, and if there is a scroll bar, the scroll bar will be displayed.

-------------------------------------------------------------------------------------------------------------

9, v5.0.4 currently does not provide drop-down refresh and pull-up load of the demo, pull-up loading and V4 demo similar, pull down needs temporary solution (change source)

1), options add an attribute topoffset:0

2), in the Resetpostion method

if (x = = This.x && y = = this.y) {      return false;  

　　

Front Plus

1  This  This  This  This  This  This  This this. Y;  

3), refresh in the

1 varRF = This. wrapper.offsetheight;//Force reflow2 3  This. Wrapperwidth = This. wrapper.clientwidth;4  This. Wrapperheight = This. wrapper.clientheight;5         6 //Add7  This. minscrolly =- This. options.topoffset | | 0;8 //End Add9 /*REPLACE Start:refresh*/Ten  One  This. Scrollerwidth = This. scroller.offsetwidth; A          - //mdy - //this.scrollerheight = This.scroller.offsetHeight the  This. Scrollerheight = This. scroller.offsetheight+ This. minscrolly; - //End Mdy - /*REPLACE End:refresh*/ -  +  This. MAXSCROLLX = This. Wrapperwidth- This. scrollerwidth; -          + //mdy A //this.maxscrolly = this.wrapperheight-this.scrollerheight; at  This. maxscrolly = This. Wrapperheight- This. scrollerheight+ This. minscrolly; - //End Mdy - .................. - .................. -..................

10, V4 if both up and down to scroll, you can consider double-nested, but generally do not recommend double-layered nesting, experience is not very good, there will be a lot of problems, try to avoid this demand, do a direction of rolling. It is not a big problem if it is really necessary. V4 A big problem is that if you use a double-layered nesting, the user will slide a little bit inclined to slide the whole area of the slide to float (that is, he is doing the left and right sliding and doing up and down sliding, But in fact, our demand is that users can only slide in one direction at a time. v5.0.1 version has solved this problem, v5.0.4 has this problem (do not know what the author thought), can be modified by the temporary solution of the source code. But this solution can only be solved at the beginning of the user to hold the slide only one direction, even one pixel, this time If you swipe, you'll be guaranteed to slide in only one direction (what we need), and if the user starts holding the swipe directly at the 45-degree angle, the problem still exists.

1_move:function(e) {2     if( ! This. Enabled | | Utils.eventtype[e.type]!== This. Initiated) {3         return;4     }5 6     if( This. Options.preventdefault) {//increases performance on Android? todo:check!7 E.preventdefault ();8     }9 Ten     varPoint = E.touches? E.touches[0]: E, One          A         //mdy -         //These 2 sentences must be replaced by the following 2 sentences, otherwise, when the multi-layer nesting (that is, there are scrolling up and down and left and right scrolling) will turn to one side roll up and down, but in fact we just need to focus on a certain direction -         //deltax = this.hashorizontalscroll? point.pagex-this.pointx:0, the         //DeltaY = this.hasverticalscroll? point.pagey-this.pointy:0, -DeltaX = Point.pagex- This. Pointx, -DeltaY = Point.pagey- This. Pointy, -              +         //End Mdy -timestamp =utils.gettime (), + newx, Newy, A Absdistx, absdisty; at  -          This. Pointx =Point.pagex; -          This. Pointy =Point.pagey; - ............................. - ............................. -.............................

11. If the default events in some places in the scrolling area cannot be triggered (such as a link to a tag), it is basically because Iscroll disables the default events for the form elements in the scrolling area, that is, E.preventdefault () (in order to scroll smoothly), According to the need to make a judgment in the source code, such as you want to keep the A-label default event, you can be clicked on the elements of the tagname to judge, and then decide whether to E.preventdefault ().

Full demo:http://download.csdn.net/detail/gcz564539969/6901753

ISCROLL4 upgrade to iscroll5 all tips notes