Propriedade CSS overflow-anchor

A propriedade CSS overflow-anchor controla se o recurso de ancoragem de rolagem do navegador se aplica a um elemento. A ancoragem de rolagem mantém sua posição de leitura estável quando o conteúdo acima do viewport muda de tamanho, evitando que a página salte sob você. A propriedade overflow-anchor permite desativar esse comportamento quando ele atrapalha.

Esta página aborda o que a ancoragem de rolagem resolve, os dois valores de overflow-anchor, quando desativá-la e o suporte dos navegadores disponível.

O que a ancoragem de rolagem resolve

Imagine que você está lendo um artigo e um anúncio, imagem ou comentário carregado lentamente aparece de repente acima da sua posição de rolagem atual. Sem a ancoragem de rolagem, esse conteúdo recém-inserido empurra tudo para baixo e o texto que você estava lendo salta para longe. É uma das experiências mais incômodas na web.

A ancoragem de rolagem corrige isso escolhendo um elemento DOM próximo ao topo do viewport como âncora, ajustando o deslocamento de rolagem após uma mudança de layout para que o elemento âncora permaneça visualmente fixo. Você continua lendo a mesma linha; o conteúdo inserido se expande silenciosamente acima. Os navegadores modernos ativam isso por padrão — geralmente você não pensa nisso porque simplesmente funciona.

overflow-anchor é sua saída de emergência. Ela não ativa a ancoragem de rolagem (já está ativa); apenas permite desativá-la para uma subárvore onde o ajuste automático causa problemas.

Valores da propriedade

overflow-anchor aceita dois valores reais além das palavras-chave CSS globais:

Note que overflow-anchor não é herdada por padrão, mas definir none em um ancestral efetivamente suprime a ancoragem para toda essa subárvore.

Sintaxe

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

Para desativar a ancoragem de rolagem em todo o documento, aplique none à raiz:

body {
  overflow-anchor: none;
}

Mais comumente, você limita isso apenas ao contêiner que está com problemas:

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

Quando desativar a ancoragem

Na maioria das vezes você deve manter a ancoragem ativada — desativá-la traz de volta o problema de salto de conteúdo que ela foi projetada para evitar. Recorra a overflow-anchor: none apenas em casos específicos:

• Rolagem infinita que adiciona itens no início. Uma janela de chat ou feed de "carregar mensagens antigas" que insere conteúdo no topo às vezes conflita com a ancoragem. Se você estiver gerenciando manualmente a posição de rolagem com JavaScript, o ajuste automático da ancoragem pode fazer uma dupla correção e causar uma trepidação.
• Animações personalizadas de rastreamento de rolagem. Se você lê scrollTop em cada frame para conduzir um efeito de paralaxe ou de progresso, um ajuste de ancoragem pode introduzir um deslocamento inesperado.
• Logs fixos "permanecer na parte inferior". Um log no estilo de terminal que deve sempre mostrar a linha mais recente na parte inferior pode ser mais fácil de gerenciar sem a interferência da ancoragem.

Em cada um desses casos, teste com a ancoragem ativada primeiro — talvez você não precise desativá-la.

Definir via JavaScript

Você pode alternar a ancoragem em tempo de execução através do 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";

Suporte dos navegadores e degradação graciosa

overflow-anchor (e a ancoragem de rolagem em si) é suportada no Chrome, Edge, Firefox e outros navegadores baseados em Chromium. O Safari historicamente não implementou a ancoragem de rolagem, portanto a propriedade não tem efeito lá — as páginas simplesmente se comportam como se a ancoragem estivesse desativada.

Como a propriedade apenas remove um comportamento desejável, não há nada a fazer com polyfill e nenhum fallback a escrever: em navegadores sem suporte, overflow-anchor: none é inócuo e ignorado.

Propriedades relacionadas

• overflow — o atalho que decide se o conteúdo excedente é cortado, rolado ou visível.
• overflow-x e overflow-y — controlam o overflow em cada eixo independentemente.
• scroll-behavior — faz a rolagem (por exemplo, para âncoras) animar suavemente em vez de saltar.
• position — combina com layouts sticky/fixed que frequentemente coexistem com regiões roláveis.

Prática