Solution to the problem that isscroll.js cannot rebound when pulling up and down to refresh

Solution to the problem that isscroll.js cannot rebound when pulling up and down to refresh_javascript skills

WBOY

Release： 2016-05-16 15:15:06

Original

1114 people have browsed it

Friends who have used the pull-up and pull-down refresh effect of iscroll.js should have encountered this problem: in the iOS browser, when pulling up or pulling down to refresh, when the finger is swiped out of the screen, the page cannot bounce back. Because many people can't solve this problem, they simply don't solve it. Some people just don't use HTML and use native pages instead of HTML.

I believe many friends also have their own solutions, but they have not been written down, so the solutions cannot be found online. In many QQ groups, many people are asking how to solve this problem, so I wrote this article to record my solution, hoping it will be helpful to some friends.

The main code for pull-up and pull-down 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();
   }
  }
 });

Copy after login

The reason why the page cannot bounce back is that the touchend event cannot be triggered after the finger is drawn out of the screen, and the rebound animation cannot be executed. The solution is to manually trigger the animation method when the finger is close to 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;
   }

   ......
  }

Copy after login

The following explains the meaning of this code.

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

When this.y < this.maxScrollY, it is already in the pull-up process. When (this.y < this.maxScrollY) && (this.pointY < 1), it is in the pull-up process and the finger has touched At the edge of the screen, manually trigger this.scrollTo(0, this.maxScrollY, 400) at this time, and the page will start to rebound.

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