Propiedad CSS overflow-anchor

La propiedad CSS overflow-anchor controla si la función de anclaje de desplazamiento del navegador se aplica a un elemento. El anclaje de desplazamiento mantiene estable tu posición de lectura cuando el contenido que está por encima del viewport cambia de tamaño, para que la página no salte bajo tus ojos. La propiedad overflow-anchor te permite desactivar ese comportamiento cuando interfiere.

Esta página explica qué resuelve el anclaje de desplazamiento, los dos valores de overflow-anchor, cuándo desactivarlo y el soporte de navegadores en el que puedes confiar.

Qué resuelve el anclaje de desplazamiento

Imagina que estás leyendo un artículo y de repente un anuncio, una imagen o un comentario cargado de forma diferida aparece por encima de tu posición de desplazamiento actual. Sin el anclaje de desplazamiento, ese contenido recién insertado empuja todo hacia abajo y el texto que estabas leyendo desaparece. Es una de las experiencias más molestas en la web.

El anclaje de desplazamiento soluciona esto eligiendo un elemento del DOM cerca de la parte superior del viewport como ancla, y luego ajustando el desplazamiento tras un cambio de diseño para que ese elemento ancla permanezca visualmente fijo. Sigues leyendo la misma línea; el contenido insertado se expande en silencio por encima. Los navegadores modernos activan esto por defecto — normalmente ni lo piensas porque simplemente funciona.

overflow-anchor es tu vía de escape. No activa el anclaje de desplazamiento (ya está activado); solo te permite desactivarlo en un subárbol donde el ajuste automático causa problemas.

Valores de la propiedad

overflow-anchor acepta dos valores reales más las palabras clave CSS globales:

Ten en cuenta que overflow-anchor no se hereda por defecto, pero establecerlo en none en un ancestro suprime eficazmente el anclaje para todo ese subárbol.

Sintaxis

overflow-anchor: auto | none | initial | inherit;

Para desactivar el anclaje de desplazamiento en todo un documento, aplica none a la raíz:

body {
  overflow-anchor: none;
}

Más habitualmente, lo limitas solo al contenedor que se comporta mal:

.live-feed {
  overflow-anchor: none;
}

Cuándo desactivar el anclaje

La mayoría de las veces deberías dejar el anclaje activado — desactivarlo devuelve el problema de salto de contenido que fue diseñado para prevenir. Recurre a overflow-anchor: none solo en casos específicos:

• Scroll infinito que añade elementos al inicio. Una ventana de chat o un feed de "cargar mensajes antiguos" que inserta contenido en la parte superior a veces entra en conflicto con el anclaje. Si estás gestionando manualmente la posición de desplazamiento con JavaScript, el ajuste automático del anclaje puede sobre-corregir y causar un tartamudeo.
• Animaciones de seguimiento de desplazamiento personalizadas. Si lees scrollTop en cada fotograma para controlar un efecto parallax o de progreso, un ajuste de anclaje puede introducir un desplazamiento inesperado.
• Registros que deben permanecer al final. Un registro de estilo terminal que siempre debe mostrar la línea más reciente en la parte inferior puede ser más fácil de gestionar sin la interferencia del anclaje.

En cada uno de estos casos, prueba primero con el anclaje activado — puede que no necesites desactivarlo en absoluto.

Configurarlo desde JavaScript

Puedes alternar el anclaje en tiempo de ejecución a través del DOM:

// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";

// Re-enable it later
feed.style.overflowAnchor = "auto";

Soporte de navegadores y degradación elegante

overflow-anchor (y el anclaje de desplazamiento en sí) es compatible con Chrome, Edge, Firefox y otros navegadores basados en Chromium. Safari históricamente no ha implementado el anclaje de desplazamiento, por lo que la propiedad no tiene efecto allí — las páginas simplemente se comportan como si el anclaje estuviera desactivado.

Dado que la propiedad solo elimina un comportamiento deseable pero no esencial, no hay nada que polyfill y ningún fallback que escribir: en navegadores no compatibles, overflow-anchor: none es inofensivo y se ignora.

Propiedades relacionadas

• overflow — la abreviatura que decide si el contenido desbordante se recorta, se desplaza o se muestra.
• overflow-x y overflow-y — controlan el desbordamiento en cada eje de forma independiente.
• scroll-behavior — hace que el desplazamiento (p. ej., hacia anclas) se anime suavemente en lugar de saltar.
• position — se combina con diseños sticky/fixed que a menudo coexisten con regiones desplazables.

Práctica