Desactivar pull to refresh con overscroll-behavior en CSS

Para desactivar pull to refresh (el gesto de arrastrar hacia abajo para recargar), aplica overscroll-behavior-y: contain al elemento que hace el desplazamiento de la página, normalmente body o html:

body {
  overscroll-behavior-y: contain;
}

Es el ejemplo de una sola línea del artículo de Chrome sobre la propiedad, que dice que desactiva pull-to-refresh pero conserva el resplandor de desplazamiento excesivo (overscroll glow) (Chrome for Developers, 2017). La propiedad controla qué ocurre cuando el desplazamiento llega al borde de un contenedor, y MDN cita como uno de sus usos eliminar el comportamiento de tipo «pull to refresh» del navegador (MDN, octubre de 2026). El soporte no es uniforme: MDN marca overscroll-behavior como no Baseline y el soporte de Safari es parcial, así que pruébalo en los móviles a los que te diriges.

Qué hace overscroll-behavior

overscroll-behavior decide si un desplazamiento que llega a un límite continúa en el elemento padre y si el navegador muestra sus propios efectos de desplazamiento excesivo. Según MDN, por defecto los navegadores móviles suelen mostrar un efecto de rebote o incluso recargar la página cuando se llega a la parte superior o inferior de una página o de un área de desplazamiento. La propiedad tiene cuatro palabras clave (definiciones de MDN):

El encadenamiento del desplazamiento (scroll chaining) es el comportamiento por defecto del navegador de pasar el desplazamiento al padre cuando un elemento hijo llega a su límite: el ejemplo de Chrome es un panel lateral de una app que llega al final y la página que hay detrás empieza a desplazarse. overscroll-behavior es una forma abreviada de overscroll-behavior-x y overscroll-behavior-y, y con dos palabras clave se asignan x e y en ese orden.

contain o none para pull to refresh

Usa contain cuando quieras detener la recarga pero conservar la respuesta visual de la plataforma, y none cuando además quieras quitar ese efecto. El artículo de Chrome describe contain como la opción que evita el encadenamiento del desplazamiento mientras siguen apareciendo efectos locales como el resplandor de Android, y none como lo mismo con los efectos eliminados. Para pull to refresh en la propia página:

/* stop pull to refresh, keep the glow */
body { overscroll-behavior-y: contain; }

/* also remove glow and rubber-banding */
body { overscroll-behavior-y: none; }

El artículo de Chrome también señala que, en html, contain evita la navegación por desplazamiento excesivo, y que un none horizontal estaba pensado para bloquear la navegación con gestos de deslizar a izquierda y derecha, algo que Chrome aún no había implementado cuando se escribió el artículo en 2017. Comprueba el comportamiento actual antes de depender de él para los gestos de deslizamiento lateral.

Desactivar pull to refresh quita un gesto que la gente usa para recargar. Si la página muestra datos que se actualizan constantemente, ofrece a los usuarios un botón de actualizar o tu propio gesto de arrastrar, porque el del navegador ya no estará.

En body o en un contenedor con desplazamiento

Pon la propiedad en el elemento que se desplaza, porque solo se aplica a contenedores con desplazamiento. En la página, ese es el elemento que define el viewport, html o body. En un panel interno, un cajón lateral o una lista de chat, ponla en ese panel:

.chat-list {
  height: 12em;
  overflow: auto;
  overscroll-behavior: contain;
}

Así la página que hay detrás del panel no se desplaza cuando el usuario llega al final de la lista; el ejemplo de MDN usa el mismo patrón para los diálogos. Dos detalles de MDN:

• Un contenedor sin desbordamiento desplazable, como un elemento con overflow: hidden, siempre está en su límite de desplazamiento, así que un overscroll-behavior distinto del valor por defecto bloquea el encadenamiento hacia los ancestros. MDN dice que esto puede impedir el desplazamiento del fondo mientras hay un diálogo o una superposición abiertos.
• Un <iframe> no es un contenedor con desplazamiento, así que la propiedad no tiene efecto sobre el elemento iframe. Para controlar el encadenamiento desde dentro de un iframe, aplícala tanto a html como a body del documento del iframe.

Soporte de navegadores en 2026

Las palabras clave auto, contain y none tienen soporte desde Chrome 63, Firefox 59 y Safari 16 (Safari iOS 16), según MDN browser-compat-data 8.1.7 (octubre de 2026). El soporte de Safari figura como parcial: la propiedad no tiene efecto en contenedores sin desbordamiento desplazable, y Samsung Internet tiene la misma nota parcial. La palabra clave chain es más reciente: BCD la recoge desde Chrome 150 y Firefox 157, y no en Safari. BCD tiene además una entrada aparte de nivel superior para la propiedad que empieza en Chrome 144 y Firefox 150. Por eso web-features 3.44.0 no incluye overscroll-behavior como Baseline, y MDN dice que es «not Baseline» porque no funciona en algunos de los navegadores más usados.

Qué significa esto para pull to refresh: la forma larga overscroll-behavior-y con contain o none es la que usa el artículo de Chrome, y Safari 16 incorporó la propiedad (WebKit, septiembre de 2022). Ni las notas de versión de WebKit ni MDN indican si Safari en iPhone detiene el gesto de recarga de la página, así que compruébalo en un iPhone.

Cómo probarlo en un móvil

Prueba pull to refresh en un dispositivo real o en un emulador, porque es un gesto táctil.

1. Carga la página en un móvil, desplázate hasta lo más alto y arrastra hacia abajo. Sin el CSS, el navegador puede recargar o rebotar. Con overscroll-behavior-y: contain en body, no debería recargarse nada.
2. Desplaza un panel anidado hasta el final y sigue arrastrando. La página de detrás debería quedarse quieta si el panel tiene contain.
3. Repite la prueba en cada navegador que admitas. Chrome en Android, Safari en iPhone y Samsung Internet tienen cada uno sus propias notas más arriba.
4. Repítela en una aplicación web instalada, si publicas una; consulta qué es una aplicación web progresiva para ver cómo cambia la instalación entre plataformas.

Para Android desde un ordenador, consulta cómo probar un sitio web en Android desde el ordenador. Para iOS sin tener un iPhone, consulta probar en un iPhone sin iPhone y, para el resto de una ronda de pruebas móviles, la lista de comprobación para probar un sitio web móvil.

Mobile View Extension recarga la pestaña con el user agent, el tamaño de pantalla y la densidad de píxeles de un móvil, así que muestra tu diseño y qué página se sirve, pero se maneja con ratón. No envía eventos táctiles, así que no puedes arrastrar la página para recargarla, y usa el motor de Chrome de escritorio, así que no reproduce el comportamiento de Safari. Úsala para revisar el diseño de un botón de actualizar propio, y un dispositivo o un simulador para el gesto.

Preguntas frecuentes

¿Cómo desactivo pull to refresh con CSS?

Aplica overscroll-behavior-y: contain a body o html. El artículo de Chrome lo describe como una sola línea que desactiva pull-to-refresh y conserva el resplandor de desplazamiento excesivo; usa none para quitar también el resplandor.

¿Cuál es la diferencia entre overscroll-behavior contain y none?

contain evita el encadenamiento del desplazamiento y puede seguir mostrando un efecto de rebote, mientras que none evita tanto el encadenamiento como el rebote (MDN). Para pull to refresh en la página, ambos detienen la recarga en Chrome según su artículo.

¿Funciona overscroll-behavior en Safari?

Safari 16 y posteriores admiten la propiedad, con una implementación parcial: no tiene efecto en contenedores sin desbordamiento desplazable (MDN browser-compat-data 8.1.7). Prueba en un iPhone para ver qué ocurre con el gesto a nivel de página.

¿Qué es el scroll chaining?

El scroll chaining (encadenamiento del desplazamiento) es que el navegador pasa el desplazamiento al contenedor padre cuando un hijo llega a su límite, por ejemplo cuando el final de un diálogo hace que se desplace la página de detrás. overscroll-behavior: contain lo detiene.