Android の Chrome では (バージョンによりますが)
Pull To Refresh という、画面下方向へスワイプさせ、
コンテンツを縦方向にオーバースクロールすると
ページをリロードするという機能があります。
これをどうにかして無効化したいときの
対処法をシェアしようと思います。
完全に無効化
ユーザ側であれば Pull To Refresh を完全に無効化できます。
まず、アドレスバーに以下を入力します。
chrome://flags/#disable-pull-to-refresh-effect
『「スクロールして更新」の効果を無効にする。』
というような項目があるので、そこで『有効にする』
をタップします。
それから、必ず Chrome を再起動します。
ちょっと日本語の表現がややこしいですが、
これで Pull To Refresh を常に無効化できます。
もとに戻すときには『無効にする』をタップして
Chrome を再起動します。
大雑把に無効化
サービス側では完全に無効化するのは難しいです。
しかし、大雑把に無効化することはできます。
例えば以下のようなコードによって、
オーバースクロールしようとしたら
デフォルトの動作を止めることで
Pull To Refresh を無効化できます。
// prevent pulldown reload
var $target = $(window);
var windowScrollTop;
var prevY = -1;
var direction = 0; // 0:neutral, -1:gotoTop, 1:gotoBottom
$target.on('touchstart', function(e){
windowScrollTop = $target.scrollTop();
prevY = e.originalEvent.changedTouches[0].pageY;
direction = 0;
});
$target.on('touchmove', function(e){
var currentY = e.originalEvent.changedTouches[0].pageY;
if (direction == 0 && prevY != -1) {
if (currentY > prevY) { direction = -1; }
if (currentY < prevY) { direction = 1; }
}
if (windowScrollTop <= 0 && direction == -1) {
e.preventDefault();
return false;
}
prevY = currentY;
});
Nexus 7 (Andorid 4.4.4 + Chrome 44.0.2403.133)
で試したらところではうまく機能しているようです。
beforeunload
リロードが不都合であれば beforeunload で
事前確認も加えた方が良いかもしれません。
しかし、iOS (iPhone や iPad) では beforeunload が使えません。
Android と iOS で振る舞いの共通化を図るのであれば
リロードを止めたり事前確認するのではなく、
localStorage を使ってレジュームするなど
リロードを許容するような別の作りを検討する必要性があります。
以上、何かのお役に立てば幸いです。
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
