web-dev-qa-db-fra.com

Comment empêcher le pull-down-to-refresh du mobile chrome

Je veux empêcher le pull-down-to-refresh de Chrome mobile (en particulier iOS Chrome). Mon application Web a un événement de panoramique vertical avec une fenêtre d'affichage de la largeur et de la hauteur de l'appareil, mais chaque fois que le panoramique est descendu, le mobile chrome se rafraîchit en raison de la fonction par défaut du navigateur. De plus, sur le navigateur Safari, l'écran tourne pendant l’événement de panoramique. Je souhaite désactiver ces mouvements.

Bien sûr, j'ai essayé event.preventDefault (); et action tactile: aucune; Mais cela ne semble pas fonctionner. Dois-je ajouter eventListner et l'action tactile "sur la balise body"? J'attends une réponse utile avec exemple.

javascriptioscssmobile
21
Jae Woo Woo

Pour les dernières versions de Chrome: 

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

Ancienne solution:

Depuis mobile Chrome> = 56 écouteurs d'événements sont passifs par défaut et les écouteurs d'événements passifs ne peuvent plus empêcher les défauts. Voir ici Vous devez utiliser active les auditeurs d'événements aiment plutôt:

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

Essaye ça.

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

Ça a bien marché pour moi. J'ai eu des problèmes de défilement étranges en raison d'autres hacks javascript. Lisez cet article pour plus de détails.

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

10
Gaurav Saluja

Les réponses CSS uniquement publiées ici n'ont pas fonctionné pour moi. J'ai fini par faire ce qui suit:

(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