web-dev-qa-db-ja.com

モバイルのプルダウンから更新を防ぐ方法chrome

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

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

javascriptioscssmobile
21
Jae Woo Woo

Chromeの最新バージョンの場合：

html,
body {
    overscroll-behavior-y: contain;
}

古いソリューション：

モバイルなのでChrome> = 56イベントリスナーはデフォルトでパッシブであり、パッシブイベントリスナーはデフォルトを防ぐことはできません。 こちらを参照 代わりにアクティブなイベントリスナーを使用するには：

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

これを試して。

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

10
Gaurav Saluja

ここに投稿されたCSSのみの回答は、私にとってはうまくいきませんでした。私は次のことをしました：

(function() {
    var touchStartHandler,
        touchMoveHandler,
        touchPoint;

    // Only needed for touch events on chrome.
    if ((window.chrome || navigator.userAgent.match("CriOS"))
        && "ontouchstart" in document.documentElement) {

        touchStartHandler = function() {
            // Only need to handle single-touch cases
            touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
        };

        touchMoveHandler = function(event) {
            var newTouchPoint;

            // Only need to handle single-touch cases
            if (event.touches.length !== 1) {
                touchPoint = null;

                return;
            }

            // We only need to defaultPrevent when scrolling up
            newTouchPoint = event.touches[0].clientY;
            if (newTouchPoint > touchPoint) {
                event.preventDefault();
            }
            touchPoint = newTouchPoint;
        };

        document.addEventListener("touchstart", touchStartHandler, {
            passive: false
        });

        document.addEventListener("touchmove", touchMoveHandler, {
            passive: false
        });

    }
})();
1
Ruben Ray Vreeken