iscroll.js的上拉下拉刷新时无法回弹的解决方法

在ios中，部分操作下界面无法回弹。导致界面卡在上面。

页面无法弹回的原因：手指划出屏幕后touchend事件无法触发，回弹动画就无法执行。

解决办法：当手指接近屏幕边缘的时候，手动触发动画方法。

onScrollMove:  function () {

  if (( this .y <  this .maxScrollY) && ( this .pointY < 1)){

   this .scrollTo(0,  this .maxScrollY, 400);

   return ;

  }  else if ( this .y > 0 && ( this .pointY > windows.innerHeight - 1)) {

   this .scrollTo(0, 0, 400);

   return ;

  }

 

  ......

}

代码分析：

this.y是页面已经滚动的垂直距离，this.maxScrollY是最大垂直滚动距离，this.pointY手指当前的垂直坐标。

当this.y < this.maxScrollY，就是已经处于上拉的过程，当(this.y < this.maxScrollY) && (this.pointY < 1)时，处于上拉且手指已经触及屏幕边缘，这时候手动触发this.scrollTo(0, this.maxScrollY, 400)，页面就开始回弹。

下拉过程也可以同理分析。

下拉刷新、上拉加载监控完整代码块：

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();
  }
 }
});