las - descargar google chrome para android

Deshabilitar la función de extracción y actualización de Chrome de Android

Question

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 ( usando un WebView, supongo ).

Chrome Beta (y creo que también el sistema Android WebView) 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 deshabilitar 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.

Answer 1

Solución simple para 2019+

Chrome 63 (lanzado el 5 de diciembre de 2017) 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 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 supported con Chrome, Edge y Firefox, pero estoy seguro de que Safari lo agregará pronto, ya que parece estar totalmente integrado con los trabajadores de servicios y el futuro de las PWA.

Answer 2

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 posibilidad 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 evita ver eventos de desplazamiento innecesariamente, pero bloquea el desplazamiento excesivo.

jQuery

Si está utilizando jQuery, este es el equivalente no probado . element es 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.

Answer 3

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>

Answer 4

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>

Answer 5

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

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

Answer 6

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.

Answer 7

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

1. preventDefault ''que 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 de desplazamiento superior.
   • 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 se produjo cuando el desplazamiento de la página y desplazamiento era cero y 2) el movimiento táctil induciría un desplazamiento superior.
2. Aplicando “ touch-action: none ” a los elementos táctiles, donde sea apropiado, deshabilitando las acciones predeterminadas (incluida la extracción para actualizar) 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

Answer 8

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

Answer 9

Lo que hice fue agregar lo siguiente a los touchstart y touchend / touchcancel :

scrollTo(0, 1)

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

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

Answer 10

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 captar eventos de touchmove , pero las posibilidades son muy escasas para lograr un resultado aceptable.

Answer 11

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

Answer 12

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

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

Answer 13

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

Answer 14

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

Answer 15

Uso MooTools y he creado una Clase para deshabilitar la actualización en un elemento objetivo, pero el quid de la misma 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 ...