iscroll.js cannot bounce back from a pull down refresh

Anyone who has used iscroll.js's pull-down refresh has experienced this problem: in iOS's browser, the page cannot bounce back when the finger is drawn out of the screen during a pull-up or pull-down refresh. A lot of people don't solve this problem, they just leave it at that, or they just use HTML instead of HTML.

I believe that many friends also have their own solutions, but not written down, so the Internet can not find the solution. In many QQ groups, there are also many people asking how to solve this problem, so I write this article to record my solution, hoping to help some friends.

Pull-down to refresh the main code:

 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 the page cannot bounce back is that the touchend event cannot be triggered when the finger is drawn off the screen and the bounce animation cannot be performed. The solution: Manually trigger the animation method when your finger approaches the edge of the screen.

Insert the judgment code in the onScrollMove method:

  onScrollMove: function () {
   if((this.y < this.maxScrollY) && (this.pointY < 1)){
    this.scrollTo(0, this.maxScrollY, 400);
    return;
   } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
    this.scrollTo(0, 0, 400);
    return;
   }

   ......
  }

Let me explain what this code means.

this. y is the vertical scrolling distance of the page, this. maxScrollY is the maximum vertical scrolling distance, and this. pointY finger is the current vertical coordinate.

When this y < this.maxScrollY, is already in the pull up process, when (this < this.maxScrollY) & & (this.pointY < 1) When you are pulling up and your finger has touched the edge of the screen, manually trigger ES44en.scrollTo (0, this.maxScrollY, 400) and the page will start to bounce back.

The pull-down process can be analyzed in the same way.