解決iscroll.js上拉下拉刷新手指划出屏幕頁面無法回彈問題

博客已遷移至http://zlwis.me。

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

頁面無法彈回的原因在於：手指划出屏幕后touchend事件無法觸發，回彈動畫就無法執行。解決辦法就是：當手指接近屏幕邊緣的時候，手動觸發動畫方法。

在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)時，處於上拉且手指已經觸及屏幕邊緣，這時候手動觸發this.scrollTo(0, this.maxScrollY, 400)，頁面就開始回彈。

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

歡迎留下你的解決方法。