He creado una pequeña aplicación web HTML5 para mi empresa.

Esta aplicación muestra una lista de elementos y todo funciona bien.

La aplicación se utiliza principalmente en teléfonos Android y Chrome como navegador. Además, el sitio se guarda en la pantalla de inicio para que Android administre todo como una aplicación ( supongo que usando un WebView ).

Chrome Beta (y creo que también el WebView del sistema Android) ha introducido una función "desplegable para actualizar" ( consulte este enlace, por ejemplo ).

Esta es una característica útil, pero me preguntaba si se puede desactivar con alguna metaetiqueta (o cosas de JavaScript) porque el usuario puede activar fácilmente la actualización mientras navega por la lista y se vuelve a cargar toda la aplicación.

Además, esta es una característica que la aplicación no necesita.

Sé que esta función todavía está disponible solo en Chrome beta, pero tengo la sensación de que también está aterrizando en la aplicación estable.

¡Gracias!

Editar: he desinstalado Chrome Beta y el enlace anclado a la pantalla de inicio ahora se abre con el Chrome estable. Entonces, los enlaces anclados comienzan con Chrome y no con una vista web.

Editar: hoy (19/03/2015) el menú desplegable para actualizar ha llegado al cromo estable.

Editar: desde la respuesta de @Evyn, sigo este enlace y obtuve 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 señaló @bcintegrity, espero una solución de manifiesto del sitio (y / o una metaetiqueta) en el futuro.

Además, las sugerencias para el código anterior son bienvenidas.

La acción predeterminada del efecto pull-to-refresh se puede prevenir de manera efectiva haciendo lo siguiente:

1. preventDefault'parte de la secuencia táctil, incluyendo cualquiera de los siguientes (en orden de más disruptivo a menos disruptivo):
   • a. Todo el flujo táctil (no ideal).
   • si. Todos los movimientos táctiles superiores de desplazamiento.
   • C. El primer movimiento táctil de desplazamiento superior.
   • re. El primer movimiento táctil de desplazamiento superior solo cuando 1) el inicio táctil inicial ocurrió cuando el desplazamiento de desplazamiento de página y era cero y 2) el movimiento táctil induciría un desplazamiento superior.
2. Aplicando "touch-action: none " a elementos táctiles, donde sea apropiado, deshabilitando las acciones predeterminadas (incluyendo pull-to-refresh) de la secuencia táctil.
3. Aplicando "overflow-y: hidden " al elemento del cuerpo, usando un div para contenido desplazable si es necesario.
4. Deshabilitar el efecto localmente a través de chrome://flags/#disable-pull-to-refresh-effect).

Ver más

Solución simple para 2019+

Chrome 63 ha agregado una propiedad css para ayudar exactamente con esto. Lea esta guía de Google para tener una buena idea de cómo puede manejarla.

Aquí está su TL: DR

La propiedad de comportamiento de desplazamiento de CSS permite a los desarrolladores anular el comportamiento de desplazamiento de desbordamiento predeterminado del navegador al llegar a la parte superior / inferior del contenido. Los casos de uso incluyen deshabilitar la función de extracción para actualizar en dispositivos móviles, eliminar el brillo de desplazamiento excesivo y los efectos de bandas de goma, y ​​evitar que el contenido de la página se desplace cuando está debajo de un modal / superposición.

Para que funcione, todo lo que tiene que agregar es esto en su CSS:

body {
  overscroll-behavior: contain;
}

Por ahora, solo es compatible con Chrome, Edge y Firefox, pero estoy seguro de que Safari lo agregará pronto, ya que parecen estar totalmente integrados con los trabajadores de servicios y el futuro de las PWA.

Por el momento, solo puede deshabilitar esta función a través de chrome: // flags / # disable-pull-to-refresh-effect - abrir directamente desde su dispositivo.

Podría intentar atrapar touchmoveeventos, pero las posibilidades son muy escasas para lograr un resultado aceptable.

Uso MooTools y he creado una Clase para deshabilitar la actualización en un elemento objetivo, pero el quid de la cuestión es (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;
});

Todo lo que hacemos aquí es encontrar la dirección y del movimiento táctil, y si nos estamos moviendo hacia abajo en la pantalla y el desplazamiento de destino es 0, detenemos el evento. Por lo tanto, no hay actualización.

Esto significa que estamos disparando en cada 'movimiento', que puede ser costoso, pero es la mejor solución que he encontrado hasta ahora ...

Después de muchas horas de intentarlo, esta solución me funciona.

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

AngularJS

Lo he desactivado con éxito con esta directiva 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);
        }
    };
});

Es seguro dejar de verlo tan pronto como el usuario se desplace hacia abajo, ya que la acción de actualizar no tiene posibilidades de activarse.

Del mismo modo, si scrolltop > 0, el evento no se activará. En mi implementación, asocio el evento touchmove en touchstart, solo si scrollTop <= 0. Lo desvinculamos tan pronto como el usuario se desplaza hacia abajo ( initialY >= e.touches[0].clientY). Si el usuario se desplaza hacia arriba ( previousY < e.touches[0].clientY), entonces llamo preventDefault().

Esto nos salva de ver eventos de desplazamiento innecesariamente, pero bloquea el desplazamiento excesivo.

jQuery

Si está utilizando jQuery, este es el equivalente no probado . elementes 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 mismo también se puede lograr con JS puro.

Javascript simple

Lo implementé usando javascript estándar. Simple y fácil de implementar. Solo pegue y funciona 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 mejor solución en 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;
}

Vea esta demostración: https://jsbin.com/pokusideha/quiet

Puedes probar esto

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

ejemplo:

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

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

Encuentro configurar tu cuerpo CSS overflow-y: hidden es la forma más simple. Si desea tener una página de aplicación de desplazamiento, puede usar un contenedor div con funciones de desplazamiento.

Tenga en cuenta que overflow-y no se hereda, por lo que debe configurarlo en TODOS los elementos de bloque.

Puede hacer esto con jQuery simplemente por:

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

Desde hace un par de semanas descubrí que la función de JavaScript que usé para deshabilitar la acción de actualización de Chrome ya no funcionará. He hecho esto para resolverlo:

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

Solución 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);

Lo que hice fue poner a los siguientes touchstarty touchend/ touchcanceleventos:

scrollTo(0, 1)

Dado que Chrome no se desplaza si no está en la posición scrollY, 0esto evitará que Chrome haga pull para actualizar.

Si todavía no funciona, intente hacerlo también cuando se cargue la página.

Resolví el problema del menú desplegable para actualizar con esto:

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