A overflow-anchorpropriedade nos permite desativar a Ancoragem de Rolagem, que é um recurso do navegador destinado a permitir que o conteúdo seja carregado acima do local DOM atual do usuário, sem alterar o local do usuário depois que o conteúdo foi totalmente carregado.
Por que precisamos disso
A ancoragem de rolagem é um recurso do navegador que tenta evitar uma situação comum em que você pode rolar para baixo uma página da web antes que o DOM seja totalmente carregado e, quando isso acontece, quaisquer elementos carregados acima de sua localização atual empurram você ainda mais para baixo na página.
Faz sentido porque isso aconteceria. Existem propriedades CSS que aplicamos aos elementos que fornecem tamanho (por exemplo width), forma (por exemplo transform) e posição (por exemplo margin). Se esses elementos não tiverem sido carregados no momento em que rolamos a página para baixo, o DOM continuará a carregá-los, mesmo que eles estejam fora de nossa janela de visualização atual, e se expandirá fisicamente para abrir espaço para os elementos recém-carregados. Conforme o DOM cresce, nossa posição na página muda para acomodar esses elementos.
A ancoragem de rolagem evita aquela experiência de "pulo", bloqueando a posição do usuário na página enquanto as alterações ocorrem no DOM acima do local atual. Isso permite que o usuário permaneça ancorado onde está na página, mesmo quando novos elementos são carregados no DOM.
A overflow-anchorpropriedade nos permite cancelar o recurso de ancoragem de rolagem no caso de ser preferível permitir que o conteúdo seja re-fluxo conforme os elementos são carregados.
Sintaxe
article ( overflow-anchor: (auto | none ); )Valores
A overflow-anchorpropriedade aceita dois valores que essencialmente alternam se o recurso está habilitado ou não.
auto(padrão): Ativa a ancoragem de rolagem na parte da página ou elemento ao qual é aplicada.none: Desativa a ancoragem de rolagem em parte ou na totalidade de uma página da web ou exclui partes do DOM de serem ancoradas, permitindo o refluxo do conteúdo.
Você provavelmente aplicaria isso ao body, mas pode definir o escopo para qualquer seletor, e terá efeito se aquele elemento rolar.
Demo
Nesta demonstração, assim que você rolar em uma das caixas, ele adicionará um monte de caixas verdes no topo da div. Normalmente, isso empurraria o conteúdo para baixo imediatamente, potencialmente sendo uma grande distração e perdendo seu lugar no texto. Com overflow-anchor: auto;, o local de rolagem é preservado. overflow-anchor: none;permite que os divs recém-inseridos afetem a posição de rolagem.
Veja a âncora de estouro da caneta de Chris Coyier (@chriscoyier) no CodePen.
Outra coisa que pode ser muito útil é fixar a posição de rolagem de um elemento na parte inferior. Por exemplo, um aplicativo de bate-papo onde novas mensagens são anexadas ao DOM na parte inferior e você deseja que a posição de rolagem permaneça na parte inferior, mostrando todas as novas mensagens:
Veja a
rolagem da caneta "Fique na parte inferior" com a âncora de rolagem de Chris Coyier (@chriscoyier)
no CodePen.
Suporte para navegador
No momento em que este documento foi escrito, overflow-anchornão é um padrão W3C atual, embora o relatório preliminar da especificação proposta esteja disponível para leitura e tenha sido adotado pelo Chrome desde a versão 56. A Mozilla está considerando um recurso semelhante no Firefox. À medida que mais navegadores adotam o recurso de ancoragem de rolagem, podemos esperar mais suporte de navegador para, overflow-anchoruma vez que oferece controle explícito para cancelar o recurso.
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 56 | 66 | Não | 79 | Não |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Não |
Mais Informações
- Ancoragem de Rolagem: Rascunho proposto da especificação de Ancoragem de Rolagem
- Chromium Blog: a postagem do blog anunciando a inclusão do Chrome de Scroll Anchoring e a propriedade CSS na versão 56
- Bugzilla Ticket # 43114: Abra o ticket para incluir a propriedade no Firefox