Iscroll.js solution for pull down and pull down when refreshing _javascript tips

Friends who have used iscroll.js to pull down the refresh effect should have had this problem: in iOS browsers, when pulling or pulling down to refresh, the page cannot bounce back when the finger is out of the screen. A lot of people because can not solve this problem, simply do not solve, and some directly do not use HTML, using native instead of HTML page.

I believe many friends also have their own solutions, but did not write out, so the Internet can not find solutions. In many QQ group inside also have a lot of people to ask how to solve this problem, so I write this article record my solution, hope to some friends help.

Pull down the main code to refresh:

 Myscroll = new Iscroll (' wrapper ', {vscrollbar:false, usetransition:true, Topoffset:pulldownoffset, OnRefresh
    : function () {if (PullDownEl.className.match (' loading ')) {pulldownel.classname = ';
   Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Pull down to refresh ... ';
    else if (pullUpEl.className.match (' loading ')) {pullupel.classname = ';
   Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Pull up to load more ... '; }, Onscrollmove:function () {if (This.y > 5 &&!pulldownel.classname.match (' Flip ') {Pulldownel
    . ClassName = ' Flip ';
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Release to refresh ... ';
   this.minscrolly = 0;
    else if (This.y < 5 && pullDownEl.className.match (' Flip ')) {pulldownel.classname = ';
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Pull down to refresh ... ';
   this.minscrolly =-pulldownoffset; else if (This.y < this.maxscrolly-5) &&!pullupel.classname.match (' Flip ') {pullupel.classname = ' flip ';
    Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Release to refresh ... ';
   this.maxscrolly = this.maxscrolly;
    else if (This.y > (this.maxscrolly + 5) && pullUpEl.className.match (' Flip ')) {pullupel.classname = ';
    Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Pull up to load more ... ';
   this.maxscrolly = Pullupoffset;
    }, Onscrollend:function () {if (PullDownEl.className.match (' Flip ')) {pulldownel.classname = ' loading ';
    Pulldownel.queryselector ('. Pulldownlabel '). InnerHTML = ' Loading ... ';
   Pulldownaction ();
    else if (pullUpEl.className.match (' Flip ')) {pullupel.classname = ' loading ';
    Pullupel.queryselector ('. Pulluplabel '). InnerHTML = ' Loading ... ';
   Pullupaction ();
 }
  }
 });

The reason that the page cannot bounce back is that the Touchend event cannot be triggered after the finger is drawn out, and the rebound animation cannot be performed. The solution is to manually trigger the animation method when the finger is close to the edge of the screen.

To insert a judgment code in the Onscrollmove method:

  Onscrollmove:function () {
   if (This.y < this.maxscrolly) && (This.pointy < 1)) {
    This.scrollto (0, This.maxscrolly,);
    return;
   } else if (This.y > 0 && (This.pointy > Window.innerheight-1)) {
    this.scrollto (0, 0,);
    return;
   }

   ......
  }

Let's explain the meaning of this piece of code.

This.y is the vertical distance that the page has been scrolled, this.maxscrolly is the maximum vertical scrolling distance, this.pointy the current vertical coordinate of the finger.

When This.y < this.maxscrolly is already in the pull process, when (This.y < this.maxscrolly) && (This.pointy < 1), When a pull is pulled and the finger has touched the edge of the screen, the This.scrollto (0, this.maxscrolly, 400) is manually triggered and the page begins to bounce back.

The Drop-down process can also be analyzed with empathy.