Ho creato una piccola applicazione Web HTML5 per la mia azienda.

Questa applicazione visualizza un elenco di elementi e tutto funziona bene.

L'applicazione è utilizzata principalmente su telefoni Android e Chrome come browser. Inoltre, il sito viene salvato sulla schermata principale in modo che Android gestisca il tutto come un'app ( usando un WebView credo ).

Chrome Beta (e penso anche il sistema WebView di Android) ha introdotto una funzione "pull down to refresh" ( vedi questo link per esempio ).

Questa è una funzionalità utile, ma mi chiedevo se potesse essere disabilitato con alcuni meta tag (o roba javascript) perché l'aggiornamento può essere facilmente attivato dall'utente durante la navigazione dell'elenco e l'intera app viene ricaricata.

Anche questa è una funzione non necessaria per l'applicazione.

So che questa funzione è ancora disponibile solo nella versione beta di Chrome, ma ho la sensazione che anche questa stia atterrando sull'app stabile.

Grazie!

Modifica: ho disinstallato Chrome Beta e il collegamento aggiunto alla schermata principale ora si apre con Chrome stabile. Quindi i collegamenti aggiunti iniziano con Chrome e non con una visualizzazione Web.

Modifica: oggi (19-03-2015) il pull-down-to-refresh è arrivato al chrome stabile.

Modifica: dalla risposta di @Evyn seguo questo link e ho ottenuto questo codice javascript / jquery che funziona.

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;
        }
    }
});

Come sottolineato da @bcintegrity, spero in futuro di trovare una soluzione manifest per il sito (e / o un meta-tag).

Inoltre sono benvenuti suggerimenti per il codice sopra.

L'azione predefinita dell'effetto pull-to-refresh può essere efficacemente impedita effettuando una delle seguenti operazioni:

1. preventDefaultin una parte della sequenza tattile, incluso uno dei seguenti (nell'ordine dal più distruttivo al meno distruttivo):
   • un. L'intero flusso di tocco (non ideale).
   • b. Tutti i migliori movimenti touch-over.
   • c. Il primo touchmove supercrolling.
   • d. Il primo touchmove con overcolling superiore solo quando 1) il touchstart iniziale si è verificato quando l'offset di scorrimento pagina y era zero e 2) il touchmove avrebbe indotto un overcolling superiore.
2. Applicando " touch-action: none" agli elementi con targeting per tocco, ove appropriato, disabilitando le azioni predefinite (incluso pull-to-refresh) della sequenza di tocchi.
3. Applicando " overflow-y: hidden" all'elemento body, usando un div per il contenuto scorrevole, se necessario.
4. Disabilitare l'effetto localmente tramite chrome://flags/#disable-pull-to-refresh-effect).

Vedi altro

Soluzione semplice per il 2019+

Chrome 63 ha aggiunto una proprietà CSS per dare una mano con questo. Leggi questa guida di Google per avere una buona idea di come gestirla.

Ecco il loro TL: DR

La proprietà CSS overscroll-behavior consente agli sviluppatori di ignorare il comportamento di scorrimento di overflow predefinito del browser quando raggiungono la parte superiore / inferiore del contenuto. I casi d'uso includono la disabilitazione della funzione pull-to-refresh sui dispositivi mobili, la rimozione di effetti di bagliore e di scorrimento della gomma eccessivi e la prevenzione dello scorrimento del contenuto della pagina quando si trova sotto un modale / overlay.

Per farlo funzionare, tutto ciò che devi aggiungere è questo nel tuo CSS:

body {
  overscroll-behavior: contain;
}

È anche supportato solo da Chrome, Edge e Firefox per ora, ma sono sicuro che Safari lo aggiungerà presto poiché sembrano essere pienamente integrati con gli operatori del servizio e il futuro dei PWA.

Al momento puoi disabilitare questa funzione solo tramite chrome: // flags / # disable-pull-to-refresh-effect - apri direttamente dal tuo dispositivo.

Potresti provare a catturare touchmoveeventi, ma le possibilità sono molto scarse per ottenere un risultato accettabile.

Uso MooTools e ho creato una classe per disabilitare l'aggiornamento su un elemento target, ma il punto cruciale è (JS nativo):

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;
});

Tutto ciò che facciamo qui è trovare la direzione y del touchmove e se ci stiamo spostando verso il basso dello schermo e lo scorrimento target è 0, interrompiamo l'evento. Pertanto, nessun aggiornamento.

Ciò significa che stiamo sparando su ogni "mossa", che può essere costosa, ma è la migliore soluzione che ho trovato finora ...

Dopo molte ore di tentativi, questa soluzione funziona per me

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

AngularJS

L'ho disabilitato con successo con questa direttiva 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);
        }
    };
});

È sicuro interrompere la visione non appena l'utente scorre verso il basso, poiché il pull per aggiornare non ha possibilità di essere attivato.

Allo stesso modo, se scrolltop > 0l'evento non verrà attivato. Nella mia implementazione, associo l'evento touchmove al touchstart, solo se scrollTop <= 0. Lo separo non appena l'utente scorre verso il basso ( initialY >= e.touches[0].clientY). Se l'utente scorre verso l'alto ( previousY < e.touches[0].clientY), allora chiamo preventDefault().

Questo ci evita di guardare eventi di scorrimento inutilmente, ma blocca l'eccessivo controllo.

jQuery

Se si utilizza jQuery, questo è l' equivalente non testato . elementè un elemento 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);

Naturalmente, lo stesso può essere ottenuto anche con JS puro.

Javascript semplice

Ho implementato usando javascript standard. Semplice e facile da implementare. Basta incollare e funziona bene.

<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 migliore soluzione su CSS puro:

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;
}

Guarda questa demo: https://jsbin.com/pokusideha/quiet

Puoi provare questo

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

esempio :

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

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

Trovo che l'impostazione del tuo corpo CSS trabocca-y: nascosto è il modo più semplice. Se volevi avere una pagina di applicazione a scorrimento, puoi semplicemente usare un contenitore div con funzionalità di scorrimento.

Si noti che overflow-y non è ereditato, quindi è necessario impostarlo su TUTTI gli elementi del blocco.

Puoi farlo con jQuery semplicemente:

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

Da un paio di settimane ho scoperto che la funzione javascript che ho usato per disabilitare l'azione di aggiornamento di Chrome non funzionerà più. Ho fatto questo per risolverlo:

$(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>

Soluzione js pura.

// 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);

Quello che ho fatto è stato aggiungere seguenti a touchstarte touchend/ touchcanceleventi:

scrollTo(0, 1)

Poiché Chrome non scorre se non è in posizione di scorrimentoY, 0ciò impedirà a Chrome di eseguire pull per aggiornare.

Se il problema persiste, provare a farlo anche al caricamento della pagina.

Ho risolto il problema del pull-down-to-refresh con questo:

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