モバイルクロムのプルダウンからリフレッシュを防ぐ方法

Question

モバイルクロム（特にiOSクロム）のプルダウンからリフレッシュを防止したいと考えています。私のWebアプリケーションには、デバイス幅とデバイス高さのビューポートを持つ縦方向のパンニングイベントがありますが、パンニングするたびにブラウザのデフォルト機能のためモバイルクロムがリフレッシュされます。さらに、Safariブラウザでは、パンニング中に画面が回転しています。私はこれらの動きを無効にしたい。

もちろん、私はevent.preventDefault（）を試しました。タッチアクション：なし。しかし、それは動作しません。 eventListnerとtouch-actionを "bodyタグに追加"する必要がありますか？私は例で役に立つ答えを期待しています。

Answer 1

Googleの次の記事をご覧ください。それは答えて、働くデモを提供します。

https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8/mobilebasic

Answer 2

モバイルクローム> = 56人のイベントリスナーには、デフォルトと受動的なイベントリスナによって受動的であるので、もはやデフォルトを防ぐことはできません。

document.addEventListener('touchstart', touchstartHandler, {passive: false}); 
document.addEventListener('touchmove', touchmoveHandler, {passive: false}); 

ここで作業例：あなたが代わりにそうようにアクティブなイベントリスナーを使用する必要が See here

https://output.jsbin.com/niyukadizu/quiet

https://output.jsbin.com/niyukadizu

Answer 3

はこれを試してみてください。

body { 
    /* Disables pull-to-refresh but allows overscroll glow effects. */ 
    overscroll-behavior-y: contain; 
} 

私にとってはうまくいきました。私は他のJavaScriptのハックのために不思議なスクロールの問題を抱えていました。詳細はこの記事をお読みください。

https://developers.google.com/web/updates/2017/11/overscroll-behavior