Android の Chrome の Pull To Refresh (画面下方向へスワイプさせ、コンテンツを縦方向にオーバースクロールするとリロードするアレ) を無効化する方法

Android の Chrome の Pull To Refresh は chrome://flags/#disable-pull-to-refresh-effect または Javascript によって無効化することができます。

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万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*