Definir um destino de rolagem para a renderização inicial

A propriedade CSS scroll-initial-target oferece uma maneira declarativa, somente CSS, de trazer um elemento descendente específico para a área visível do contêiner de rolagem assim que ele é renderizado. Antes, os desenvolvedores dependiam de JavaScript (Element.scrollIntoView()) ou identificadores de fragmento do URL (#item-id), que têm limitações e são difíceis de implementar.

Como implementar

Para implementar isso:

1. Garanta um contêiner de rolagem: o elemento de destino precisa estar dentro de um contêiner de rolagem (um elemento com overflow que permite a rolagem, como overflow: auto). Pode ser qualquer elemento ancestral, incluindo o elemento raiz <html>.
2. Segmentar o item: aplique scroll-initial-target: nearest ao elemento descendente específico que você quer mostrar.

Exemplo de código: feed de mídia vertical

Neste exemplo, um feed começa rolando até um item "em destaque" específico, em vez de ir para o topo da lista.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

Implementação estratégica e práticas recomendadas

• RECOMENDAMOS usar scroll-initial-target para experiências de "início no meio", como um calendário que começa no dia atual ou uma galeria que começa em uma imagem específica.
• NÃO confunda isso com o foco de acessibilidade. Essa propriedade move apenas a janela de visualização visual, não o foco do teclado. Você precisa gerenciar manualmente o element.focus() se o destino for o ponto de partida para usuários de teclado.
• NÃO use essa propriedade se precisar de uma animação de rolagem suave no carregamento. Ela é discreta e define a posição instantaneamente durante a fase de layout.
• NÃO defina scroll-initial-target em vários elementos no mesmo contêiner rolável. Se vários elementos especificarem scroll-initial-target: nearest, o navegador vai selecionar o que aparecer primeiro na ordem da árvore do DOM.
• FORNEÇA as dimensões da mídia. Como a posição de rolagem é calculada durante o layout inicial, verifique se as imagens ou os vídeos têm aspect-ratio ou height/width fixos para evitar que o destino mude após o carregamento da mídia.
• CONSIDERE a hierarquia de precedência: um fragmento do URL (por exemplo, example.com/#top) e a propriedade scroll-start no nível do contêiner têm precedência sobre scroll-initial-target.

Estratégia de fallback

Para navegadores que ainda não são compatíveis com a API, use um substituto de JavaScript. Use o evento DOMContentLoaded para garantir que o navegador role o elemento para visualização assim que a análise do HTML for concluída, proporcionando uma experiência mais rápida do que esperar que todas as imagens e recursos sejam carregados. Como alternativa, colocar o script no final do elemento <body> também é aceitável e evita a necessidade de um listener de eventos.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});