J'ai créé une petite application Web HTML5 pour mon entreprise.

Cette application affiche une liste d'éléments et tout fonctionne correctement.

L'application est principalement utilisée sur les téléphones Android et Chrome comme navigateur. De plus, le site est enregistré sur l'écran d'accueil afin qu'Android gère le tout comme une application (en utilisant une WebView je suppose ).

Chrome Beta (et je pense également que le système Android WebView) a introduit une fonctionnalité "dérouler pour actualiser" ( voir ce lien par exemple ).

C'est une fonctionnalité pratique mais je me demandais si elle pouvait être désactivée avec une balise meta (ou des trucs javascript) car l'actualisation peut être facilement déclenchée par l'utilisateur lors de la navigation dans la liste et l'ensemble de l'application est rechargée.

Il s'agit également d'une fonctionnalité non requise par l'application.

Je sais que cette fonctionnalité n'est toujours disponible que dans la version bêta de Chrome, mais j'ai la sensation qu'elle atterrit également sur l'application stable.

Je vous remercie!

Edit: j'ai désinstallé Chrome Beta et le lien épinglé à l'écran d'accueil s'ouvre maintenant avec la version stable de Chrome. Ainsi, les liens épinglés commencent par Chrome et non par une vue Web.

Edit: aujourd'hui (2015-03-19), le menu déroulant pour actualiser est arrivé au chrome stable.

Edit: de @Evyn answer, je suis ce lien et j'ai ce code javascript / jquery qui fonctionne.

var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

Comme l'a souligné @bcintegrity, j'espère une solution de manifeste de site (et / ou une balise meta) dans le futur.

De plus, les suggestions pour le code ci-dessus sont les bienvenues.

L'action par défaut de l'effet pull-to-refresh peut être efficacement empêchée en effectuant l'une des opérations suivantes:

1. preventDefault'ing une partie de la séquence tactile, y compris l'un des éléments suivants (dans l'ordre du plus perturbateur au moins perturbateur):
   • une. L'ensemble du flux tactile (pas idéal).
   • b. Tous les mouvements tactiles de survolage supérieurs.
   • c. Le premier touchmove top overcrolling.
   • ré. Le premier toucher de défilement supérieur supérieur se déplaçait uniquement lorsque 1) le démarrage tactile initial se produisait lorsque le décalage de défilement de la page y était égal à zéro et 2) le mouvement tactile induirait un dépassement supérieur.
2. Application de « touch-action: none» aux éléments ciblés tactiles, le cas échéant, désactivation des actions par défaut (y compris pull-to-refresh) de la séquence tactile.
3. Appliquer « overflow-y: hidden» à l'élément body, en utilisant un div pour le contenu défilant si nécessaire.
4. Désactiver l'effet localement via chrome://flags/#disable-pull-to-refresh-effect).

En savoir plus

Solution simple pour 2019+

Chrome 63 a ajouté une propriété css pour vous aider exactement. Lisez ce guide de Google pour avoir une bonne idée de la façon dont vous pouvez le gérer.

Voici leur TL: DR

La propriété CSS overscroll-behavior permet aux développeurs de remplacer le comportement de défilement par défaut du navigateur lorsqu'ils atteignent le haut / bas du contenu. Les cas d'utilisation incluent la désactivation de la fonction Pull-to-refresh sur mobile, la suppression des effets de lueur de sur-défilement et de bande élastique et le fait d'empêcher le contenu de la page de défiler lorsqu'il se trouve sous une superposition modale.

Pour le faire fonctionner, tout ce que vous avez à ajouter est ceci dans votre CSS:

body {
  overscroll-behavior: contain;
}

Il n'est également pris en charge que par Chrome, Edge et Firefox pour le moment, mais je suis sûr que Safari l'ajoutera bientôt car ils semblent être pleinement intégrés avec les travailleurs des services et l'avenir des PWA.

Pour le moment, vous ne pouvez désactiver cette fonctionnalité que via chrome: // flags / # disable-pull-to-refresh-effect - ouvert directement depuis votre appareil.

Vous pouvez essayer d'attraper des touchmoveévénements, mais les chances sont très minces pour obtenir un résultat acceptable.

J'utilise MooTools et j'ai créé une classe pour désactiver l'actualisation sur un élément ciblé, mais l'essentiel est (JS natif):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

Tout ce que nous faisons ici est de trouver la direction y du touchmove, et si nous nous déplaçons vers le bas de l'écran et que le défilement cible est à 0, nous arrêtons l'événement. Ainsi, pas de rafraîchissement.

Cela signifie que nous tirons à chaque `` mouvement '', ce qui peut coûter cher, mais c'est la meilleure solution que j'ai trouvée jusqu'à présent ...

Après de nombreuses heures d'essais, cette solution fonctionne pour moi

$("html").css({
    "touch-action": "pan-down"
});

AngularJS

Je l'ai désactivé avec succès avec cette directive AngularJS:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    // Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

Il est prudent d'arrêter de regarder dès que l'utilisateur fait défiler vers le bas, car la pression d'actualisation n'a aucune chance d'être déclenchée.

De même, si scrolltop > 0, l'événement ne sera pas déclenché. Dans mon implémentation, je lie l'événement touchmove sur touchstart, uniquement si scrollTop <= 0. Je le délie dès que l'utilisateur fait défiler vers le bas ( initialY >= e.touches[0].clientY). Si l'utilisateur fait défiler vers le haut ( previousY < e.touches[0].clientY), j'appellepreventDefault() .

Cela nous évite de regarder les événements de défilement inutilement, tout en bloquant le défilement excessif.

jQuery

Si vous utilisez jQuery, c'est l' équivalent non testé . elementest un élément jQuery:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        // Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Naturellement, la même chose peut également être obtenue avec du JS pur.

Javascript simple

J'ai implémenté en utilisant javascript standard. Simple et facile à mettre en œuvre. Il suffit de coller et cela fonctionne très bien.

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            // Pull-to-refresh will only trigger if the scroll begins when the
            // document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              // To suppress pull-to-refresh it is sufficient to preventDefault the
              // first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>

La meilleure solution sur CSS pur:

body {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -1px;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}
#pseudobody {
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 2;
    margin: 0;
    padding:0;
    overflow-y: auto;
}

Voir cette démo: https://jsbin.com/pokusideha/quiet

Tu peux essayer ça

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

exemple :

https://ebidel.github.io/demos/chatbox.html

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

Je trouve que définir votre corps CSS overflow-y: hidden est le moyen le plus simple. Si vous souhaitez avoir une page d'application défilante, vous pouvez simplement utiliser un conteneur div avec des fonctionnalités de défilement.

Notez que overflow-y n'est pas hérité, vous devez donc le définir sur TOUS les éléments de bloc.

Vous pouvez le faire avec jQuery simplement en:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');

Depuis quelques semaines, j'ai découvert que la fonction javascript que j'avais utilisée pour désactiver l'action d'actualisation de Chrome ne fonctionnait plus. J'ai fait ceci pour le résoudre:

$(window).scroll(function() {
   if ($(document).scrollTop() >= 1) {
      $("html").css({
         "touch-action": "auto"}
      );
   } else {
      $("html").css({
         "touch-action": "pan-down"
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Solution js pure.

// Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.touches[0].clientY;
        var touchYDelta = touchY - lastTouchY;
        lastTouchY = touchY;
        if (preventPullToRefresh) {
            // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
            preventPullToRefresh = false;
            if (touchYDelta > 0) {
                e.preventDefault();
                return;
            }
        }

    }, false);

Ce que j'ai fait, c'est ajouter ce qui suit aux événements touchstartet touchend/ touchcancel:

scrollTo(0, 1)

Puisque chrome ne défile pas s'il n'est pas en position scrollY 0 cela empêchera le chrome de tirer pour actualiser.

Si cela ne fonctionne toujours pas, essayez également de le faire lorsque la page se charge.

J'ai résolu le problème du déroulement pour actualiser avec ceci:

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}