Eu criei um pequeno aplicativo Web HTML5 para minha empresa.

Este aplicativo exibe uma lista de itens e tudo funciona bem.

O aplicativo é usado principalmente em telefones Android e Chrome como navegador. Além disso, o site é salvo na tela inicial para que o Android gerencie tudo como um aplicativo ( usando um WebView, eu acho ).

O Chrome Beta (e acho que também o Android System WebView) introduziu o recurso "puxar para atualizar" ( veja este link, por exemplo ).

Esse é um recurso útil, mas eu queria saber se ele pode ser desativado com alguma metatag (ou material javascript) porque a atualização pode ser facilmente acionada pelo usuário enquanto você navega na lista e o aplicativo inteiro é recarregado.

Além disso, esse é um recurso não necessário ao aplicativo.

Sei que esse recurso ainda está disponível apenas no Chrome beta, mas tenho a sensação de que ele também está chegando ao aplicativo estável.

Obrigado!

Editar: desinstalei o Chrome Beta e o link fixado na tela inicial agora é aberto com o Chrome estável. Portanto, os links fixados começam no Chrome e não em uma visualização na web.

Edit: today (19/03/2015) o pull-down-to-refresh chegou ao chrome estável.

Edit: from @Evyn answer Eu sigo este link e recebi este código javascript / jquery que funciona.

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

Como o @bcintegrity apontou, espero uma solução de manifesto de site (e / ou uma meta tag) no futuro.

Além disso, sugestões para o código acima são bem-vindas.

A ação padrão do efeito de puxar para atualizar pode ser efetivamente evitada seguindo um destes procedimentos:

1. preventDefaultuma parte da sequência de toque, incluindo qualquer um dos seguintes (na ordem de mais perturbador para menos perturbador):
   • uma. Todo o fluxo de toque (não é o ideal).
   • b. Todos os toques de rolagem superiores.
   • c. O primeiro touchmove de rolagem superior.
   • d. O primeiro touchmove de rolagem superior apenas quando 1) o touchstart inicial ocorreu quando o deslocamento da rolagem da página e era zero e 2) o touchmove induzia a rolagem superior.
2. Aplicando " touch-action: none" a elementos segmentados por toque, quando apropriado, desativando ações padrão (incluindo puxar para atualizar) da sequência de toque.
3. Aplicando “ overflow-y: hidden” ao elemento body, usando uma div para o conteúdo rolável, se necessário.
4. Desativando o efeito localmente via chrome://flags/#disable-pull-to-refresh-effect).

Ver mais

Solução simples para 2019+

O Chrome 63 adicionou uma propriedade css para ajudar exatamente com isso. Leia este guia do Google para ter uma boa idéia de como lidar com isso.

Aqui está o TL: DR

A propriedade CSS overscroll-behavior permite que os desenvolvedores substituam o comportamento de rolagem de estouro padrão do navegador ao atingir a parte superior / inferior do conteúdo. Os casos de uso incluem desativar o recurso de puxar para atualizar no celular, remover os efeitos de brilho excessivo e faixas de borracha e impedir que o conteúdo da página role enquanto estiver sob uma sobreposição / modal.

Para que funcione, tudo o que você precisa adicionar é o seguinte no seu CSS:

body {
  overscroll-behavior: contain;
}

Por enquanto, ele também é suportado apenas pelo Chrome, Edge e Firefox, mas tenho certeza de que o Safari o adicionará assim que parecerem totalmente integrados aos profissionais de serviço e ao futuro dos PWAs.

No momento, você só pode desativar esse recurso via chrome: // flags / # disable-pull-to-refresh-effect - abra diretamente do seu dispositivo.

Você pode tentar capturar touchmoveeventos, mas as chances são muito pequenas de obter um resultado aceitável.

Eu uso o MooTools e criei uma classe para desativar a atualização em um elemento de destino, mas o ponto crucial é (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;
});

Tudo o que fazemos aqui é encontrar a direção y do touchmove e, se estivermos movendo a tela para baixo e o scroll de destino for 0, interromperemos o evento. Assim, nenhuma atualização.

Isso significa que estamos disparando a cada 'movimento', o que pode ser caro, mas é a melhor solução que encontrei até agora ...

Depois de muitas horas tentando, esta solução funciona para mim

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

AngularJS

Eu o desativei com sucesso com esta diretiva 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);
        }
    };
});

É seguro parar de assistir assim que o usuário rolar para baixo, pois a atração para atualizar não tem chance de ser acionada.

Da mesma forma, se scrolltop > 0o evento não for acionado. Na minha implementação, vinculo o evento touchmove no touchstart, apenas se scrollTop <= 0. Desvinculo assim que o usuário rola para baixo ( initialY >= e.touches[0].clientY). Se o usuário rolar para cima ( previousY < e.touches[0].clientY), eu ligo preventDefault().

Isso nos impede de assistir a eventos de rolagem desnecessariamente, mas bloqueia o excesso de rolagem.

jQuery

Se você estiver usando jQuery, este é o equivalente não testado . elementé um 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, o mesmo também pode ser alcançado com JS puro.

Javascript simples

Eu implementei usando javascript padrão. Simples e fácil de implementar. Basta colar e ele funciona bem.

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

A melhor solução em 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;
}

Veja esta demonstração: https://jsbin.com/pokusideha/quiet

Você pode tentar isso

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

exemplo:

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

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

Acho que definir o seu corpo CSS overflow-y: hidden é a maneira mais simples. Se você deseja ter uma página de aplicativo de rolagem, basta usar um contêiner div com recursos de rolagem.

Observe que o overflow-y não é herdado, portanto, você deve configurá-lo em TODOS os elementos do bloco.

Você pode fazer isso com o jQuery simplesmente:

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

Há algumas semanas, descobri que a função javascript usada para desativar a ação de atualização do Chrome não funcionará mais. Eu fiz isso para resolvê-lo:

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

Solução 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);

O que eu fiz foi adicionar o seguinte aos touchstarte touchend/ touchcancelevents:

scrollTo(0, 1)

Como o chrome não rola se não estiver na posição scrollY, 0isso impedirá o chrome de puxar para atualizar.

Se ainda assim não funcionar, tente fazer isso quando a página for carregada.

Resolvi o problema de puxar para baixo para atualizar com isso:

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