Ajuste de rolagem após mudanças de layout

A partir do Chrome 81, não é mais necessário adicionar listeners de evento para forçar a repetição.

Adam Argyle

Kaan Alsan

Yi Gu

A quebra de rolagem CSS permite que os desenvolvedores da Web criem experiências de rolagem bem controladas ao declarar posições de quebra de rolagem. Uma das desvantagens da implementação atual é que o ajuste de rolagem não funciona bem quando o layout muda, como quando a janela de visualização é redimensionada ou o dispositivo é girado. Essa falha foi corrigida no Chrome 81.

Interoperabilidade

Muitos navegadores oferecem suporte básico ao Snap de rolagem do CSS. Consulte Posso usar o recurso de rolagem de rolagem do CSS? para mais informações.

No momento, o Chrome é o único navegador que implementa o ajuste de rolagem após mudanças no layout. O Firefox tem um ticket aberto para implementar isso, e o Safari também tem um ticket aberto para reajustar depois que o conteúdo de um scroller muda. Por enquanto, é possível simular esse comportamento adicionando o código abaixo aos listeners de eventos para forçar a execução de um ajuste: javascript scroller.scrollBy(0,0); No entanto, isso não garante que o controle de rolagem volte ao mesmo elemento.

Contexto

Quebra de rolagem do CSS

O recurso de quebra de rolagem do CSS permite que desenvolvedores da Web criem experiências de rolagem bem controladas declarando posições de quebra de rolagem. Essas posições garantem que o conteúdo rolável seja alinhado corretamente com o contêiner para superar os problemas de rolagem imprecisa. Em outras palavras, o ajuste de rolagem:

• Impede posições de rolagem estranhas ao rolar.
• Cria o efeito de paginação do conteúdo.

Artigos paginados e carrosséis de imagens são dois casos de uso comuns para snaps de rolagem.

Exemplo de quebra de rolagem do CSS. No final da rolagem, o centro horizontal de uma imagem é alinhado com o centro horizontal do contêiner de rolagem.

Limitações

As posições de ajuste são perdidas ao redimensionar uma janela.

O ajuste de rolagem permite que os usuários naveguem pelo conteúdo sem esforço, mas a incapacidade de se adaptar a mudanças no conteúdo e no layout bloqueia alguns dos benefícios potenciais. Como mostrado no exemplo acima, os usuários precisam ajustar novamente as posições de rolagem sempre que redimensionam uma janela para encontrar o elemento fixado anteriormente. Alguns cenários comuns que causam mudanças no layout são:

• Redimensionar uma janela
• Como girar um dispositivo
• Como abrir o DevTools

Os dois primeiros cenários tornam o CSS Scroll Snap menos atraente para os usuários, e o terceiro é um pesadelo para desenvolvedores durante a depuração. Os desenvolvedores também precisam considerar essas deficiências ao tentar criar uma experiência dinâmica que ofereça suporte a ações como adicionar, remover ou mover conteúdo.

Uma correção comum para isso é adicionar listeners que executam uma rolagem programática via JavaScript para forçar a execução do ajuste sempre que qualquer uma das mudanças de layout mencionadas acontecer. Essa solução alternativa pode ser ineficaz quando o usuário espera que o controle deslize volte ao mesmo conteúdo de antes. Qualquer outra manipulação com JavaScript parece quase derrotar o propósito desse recurso do CSS.

Suporte integrado para reajustar após mudanças de layout no Chrome 81

As deficiências mencionadas não existem mais no Chrome 81: os controles de rolagem permanecerão ajustados mesmo após a mudança do layout. Elas vão reavaliar as posições de rolagem depois de mudar o layout e vão se encaixar na posição de ajuste mais próxima, se necessário. Se o controle deslizante tiver sido fixado anteriormente a um elemento que ainda existe após a mudança de layout, ele tentará voltar a ele. Preste atenção ao que acontece quando o layout muda no exemplo abaixo.

Posição de ajuste perdida

Girar um dispositivo não preserva as posições de ajuste no Chrome 80. Depois de rolar até o slide que diz NOPE e mudar a orientação do dispositivo de retrato para paisagem, uma tela em branco é mostrada, o que indica que a posição de ajuste de rolagem foi perdida.

Ajustar posição preservada

A rotação de um dispositivo não preserva as posições de ajuste no Chrome 81. O slide que diz NOPE permanece visível, mesmo que a orientação do dispositivo mude várias vezes.

Consulte a especificação Reajustar após mudanças de layout para saber mais detalhes.

Atenção: o ajuste também é executado quando a página é carregada. Isso afeta o deslocamento de rolagem inicial dos controles de rolagem usando o recurso de ajuste de rolagem.

Exemplo: barras de rolagem fixas

Com a opção "Ajustar após mudanças de layout", os desenvolvedores podem implementar barras de rolagem fixas com algumas linhas de CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

Quer saber mais? Confira a interface de chat de demonstração a seguir para conferir os recursos visuais.

Adicionar uma nova mensagem aciona o novo ajuste, fazendo com que ela seja fixada na parte de baixo no Chrome 81.

Trabalho futuro

No momento, todos os efeitos de ajuste de rolagem são instantâneos. Uma possível ação posterior é oferecer suporte ao ajuste de rolagem com efeitos de rolagem suave. Consulte o problema da especificação para mais detalhes.

Feedback

Seu feedback é muito importante para melhorar a restauração após mudanças de layout. Teste e compartilhe sua opinião com os engenheiros do Chromium.