10

Quisiera saber si existe alguna posibilidad de evitar, que cuando esté navegando en mi aplicación móvil, el navegador recargue la página al deslizar la pantalla hacia abajo, en caso de Chrome para Android.

Cuando deslizo el dedo muy fuerte en Chrome móvil se recarga la página.

Me gustaria saber si se puede hacer alguna configuración durante la programación de la página para evitar que esto ocurra.

2 respuestas 2

15

Agrega en tu CSS la siguiente propiedad a tu body

body {
  overscroll-behavior: contain;
}

Traducción de MDN:

La propiedad CSS overscroll-behavior establece lo que hace un navegador cuando alcanza el límite de un área de desplazamiento. Es una taquigrafía para overscroll-behavior-x y overscroll-behavior-y.

La propiedad toma tres valores posibles:

  1. auto : predeterminado. El scroll que se origina en el elemento puede propagarse a elementos hijos.
  2. contain - evita el encadenamiento de desplazamiento (scroll chaining). El comportamiento predeterminado de desbordamiento de desplazamiento se observa dentro del elemento en el que se establece este valor (por ejemplo, efectos de "rebote" o actualizaciones), pero no se produce un encadenamiento de desplazamiento a las áreas de desplazamiento vecinas, por ejemplo, los elementos subyacentes no se desplazarán.
  3. none , igual que contain, pero no se produce el encadenamiento de desplazamiento a las áreas de desplazamiento vecinas, y se evita el comportamiento predeterminado de desbordamiento de desplazamiento.

/* Valores de atributo clave */
overscroll-behavior: auto; 
overscroll-behavior: contain;
overscroll-behavior: none;

/* Dos valores (X y Y respectivamente) */
overscroll-behavior: auto contain;

/* Valores Globales */
overflow: inherit;
overflow: initial;
overflow: unset;

De forma predeterminada, los navegadores móviles tienden a proporcionar un efecto de "rebote" o incluso una actualización de la página cuando se alcanza la parte superior o inferior de una página (u otra área de desplazamiento). También puede haber notado que cuando tiene un cuadro de diálogo con contenido de desplazamiento en la parte superior de una página de contenido de desplazamiento, una vez que se alcanza el límite de desplazamiento del cuadro de diálogo, la página subyacente comenzará a desplazarse, lo que se denomina encadenamiento de desplazamiento.

Refresh de Twitter en Chrome para Android

La acción nativa de actualización de Chrome de Android actualiza toda la página

En algunos casos estos comportamientos no son deseables. Se puede usar overscroll-behavior para deshacerse del encadenamiento de desplazamiento no deseado y el comportamiento del tipo "tirar para actualizar" inspirado en la aplicación de Facebook / Twitter del navegador.

overscroll-behaviour también admite shorthands (propiedades abreviadas) para overscroll-behaviour-x y overscroll-behaviour-y si solo desea definir comportamientos para un determinado eje.


Importante: overscroll-behavior requiere Chrome 63+. Está en desarrollo o está siendo considerado por otros navegadores. Ver chromestatus.com para más información.

Fuentes:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

0

A mi tambien me resulta bastante molesto que al desplazar la pantalla para ir al principio de la web, la web se recarge automáticamente, haciendo que muchas veces se pierda la sesion que tengo abierta. Me imagino que lo que preguntan aquí no se refiere a lo que tiene que hacer un desarrollador, sino a lo que puede hacer un usuario en su dispositivo para evitar que al deslizar la pantalla las webs no se recarguen automáticamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.