Refresh_javascript 스킬을 위로 끌어올렸을 때 isscroll.js가 다시 되돌아오지 못하는 문제 해결

iscroll.js의 풀업 및 풀다운 새로 고침 효과를 사용해 본 친구들은 다음과 같은 문제를 겪었을 것입니다. iOS 브라우저에서 위로 당기거나 아래로 당겨서 새로 고칠 때 손가락을 화면 밖으로 스와이프할 때 , 페이지가 되돌아오지 않습니다. 많은 사람들이 이 문제를 해결하지 못하기 때문에 단순히 HTML을 사용하지 않고 HTML 대신 기본 페이지를 사용하는 사람들도 있습니다.

많은 친구들도 나름의 해결 방법을 가지고 있다고 생각하는데, 글로 써져 있지 않아서 온라인에서 해결 방법을 찾을 수 없습니다. 많은 QQ 그룹에서 많은 사람들이 이 문제를 해결하는 방법을 묻고 있습니다. 그래서 일부 친구들에게 도움이 되기를 바라며 내 해결 방법을 기록하기 위해 이 글을 썼습니다.

풀업 및 풀다운 새로고침의 주요 코드:

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

페이지가 되돌아오지 못하는 이유는 손가락을 화면 밖으로 빼낸 후 터치엔드 이벤트가 실행될 수 없고, 리바운드 애니메이션이 실행될 수 없기 때문입니다. 해결책은 손가락이 화면 가장자리에 가까울 때 애니메이션 메서드를 수동으로 트리거하는 것입니다.

onScrollMove 메소드에 판단 코드 삽입:

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

   ......
  }

다음은 이 코드의 의미를 설명합니다.

this.y는 페이지가 스크롤된 수직 거리이고, this.maxScrollY는 최대 수직 스크롤 거리이며, this.pointY는 손가락의 현재 수직 좌표입니다.

this.y < this.maxScrollY인 경우 이미 풀업 프로세스에 있습니다. (this.y < this.maxScrollY) && (this.pointY < 1)인 경우에는 풀업 프로세스에 있습니다. up 프로세스가 진행되고 손가락이 터치된 경우 화면 가장자리에서 this.scrollTo(0, this.maxScrollY, 400)을 수동으로 트리거하면 페이지가 리바운드되기 시작합니다.

드롭다운 과정도 같은 방식으로 분석할 수 있습니다.