chromeモバイルのpull to refresh(引っ張って更新)を簡単に無効にするスニペット

以前はandroid版だけだったようですが、最近ios版chromeでも「引っ張って更新」機能が追加されました。

私の環境(iPhone5s/ios8.3/chrome)では、中途半端に引っ張って更新しないと、複数のページでjavascriptが動作しなくなったので、webページ側でこの機能をほぼ無効にすることにしました。

厳密には完全に無効化できているわけではない(ページ下部「完全なアプローチ」参照)ですが、意図せず「引っ張って更新」が発生することはこれでなくなるかと思います。

スクロールしないページだと、上方向に引っ張って(指を下から上にスワイプ)からすぐ下方向に引っ張ると「引っ張って更新」が発生しますが、スクロールしないページなら単純に各html要素に適宜overflow:hiddenをかけてあげるとか、touchmoveをpreventDefaultしてあげればいいと思います。

早くこの機能なくなればいいのに。

動作デモ(モバイル版chromeからご覧ください)

/**
 * inspired by jdduke (http://jsbin.com/qofuwa/2/edit)
 */



var preventPullToRefresh = (function preventPullToRefresh(lastTouchY) {
  lastTouchY = lastTouchY || 0;
  var maybePrevent = false;

  function setTouchStartPoint(event) {
    lastTouchY = event.touches[0].clientY;
    // console.log('[setTouchStartPoint]TouchPoint is ' + lastTouchY);
  }
  function isScrollingUp(event) {
    var touchY = event.touches[0].clientY,
        touchYDelta = touchY - lastTouchY;

    // console.log('[isScrollingUp]touchYDelta: ' + touchYDelta);
    lastTouchY = touchY;

    // if touchYDelta is positive -> scroll up
    if(touchYDelta > 0){
      return true;
    }else{
      return false;
    }
  }

  return {
    // set touch start point and check whether here is offset top 0
    touchstartHandler: function(event) {
      if(event.touches.length != 1) return;
      setTouchStartPoint(event);
      maybePrevent = window.pageYOffset === 0;
      // console.log('[touchstartHandler]' + maybePrevent);
    },
    // reset maybePrevent frag and do prevent
    touchmoveHandler: function(event) {
      if(maybePrevent) {
        maybePrevent = false;
        if(isScrollingUp(event)) {
          // console.log('======Done preventDefault!======');
          event.preventDefault();
          return;
        }
      }
    }
  }
})();

// usage
// document.addEventListener('touchstart', preventPullToRefresh.touchstartHandler);
// document.addEventListener('touchmove', preventPullToRefresh.touchmoveHandler);

gistにも載せてます: https://gist.github.com/sundaycrafts/af0f9ed28de87d496b66

元ネタ: html - Disabling android's chrome pull-down-to-refresh feature - Stack Overflow
完全なアプローチ: HTML5 - [Chrome for Android] Pull-to-Refreshをページ側で無効化する - Qiita