Solution to the problem of not rebounding when the pull-up and pull-up is refreshed

Friends who have used the pull-up and pull-down refresh effect should have encountered this problem: in iOS browser, when pull-up or pull-down refresh, the page cannot bounce back when your fingers scratch the screen. Many people simply don’t solve this problem because they can’t solve it. Some people simply don’t use HTML and use native instead of HTML pages.

I believe many friends also have their own solutions, but they didn’t write them out, so they can’t find solutions online. There are also many people in many QQ groups asking how to solve this problem, so I wrote this article to record my solution, hoping it will be helpful to some friends.

Pull-up and pull-down refresh main code:

 myScroll = new iScroll('wrapper', {
  vScrollbar: false,
  useTransition: true,
  topOffset: pullDownOffset,
  onRefresh: function () {
   if (('loading')) {
     = '';
    ('.pullDownLabel').innerHTML = 'Pull down to refresh...';
   } else if (('loading')) {
     = '';
    ('.pullUpLabel').innerHTML = 'Pull up to load more...';
   }
  },
  onScrollMove: function () {
   if ( > 5 && !('flip')) {
     = 'flip';
    ('.pullDownLabel').innerHTML = 'Release to refresh...';
     = 0;
   } else if ( < 5 && ('flip')) {
     = '';
    ('.pullDownLabel').innerHTML = 'Pull down to refresh...';
     = -pullDownOffset;
   } else if ( < ( - 5) && !('flip')) {
     = 'flip';
    ('.pullUpLabel').innerHTML = 'Release to refresh...';
     = ;
   } else if ( > ( + 5) && ('flip')) {
     = '';
    ('.pullUpLabel').innerHTML = 'Pull up to load more...';
     = pullUpOffset;
   }
  },
  onScrollEnd: function () {
   if (('flip')) {
     = 'loading';
    ('.pullDownLabel').innerHTML = 'Loading...';
    pullDownAction();
   } else if (('flip')) {
     = 'loading';
    ('.pullUpLabel').innerHTML = 'Loading...';
    pullUpAction();
   }
  }
 });

The reason why the page cannot bounce back is that the touchend event cannot be triggered after the finger marks out the screen, and the rebound animation cannot be executed. The solution is: 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(( < ) && ( < 1)){
    (0, , 400);
    return;
   } else if ( > 0 && ( >  - 1)) {
    (0, 0, 400);
    return;
   }

   ......
  }

Let's explain the meaning of this code below.

It is the vertical distance that the page has scrolled, the maximum vertical scroll distance, the current vertical coordinate of the finger.

When < , it is already in the process of pulling up. When ( < ) && ( < 1), it is pulling up and the finger has touched the edge of the screen. At this time, manually triggering (0, , 400), the page starts to rebound.

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