Ajuste de rolagem após mudanças de layout

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

Adam Argyle

Kaan Alsan

Yi Gu

O CSS Scroll Snap permite que os desenvolvedores da Web criem experiências de rolagem bem controladas declarando as posições de ajuste da rolagem. Uma desvantagem da implementação atual é que o ajuste de rolagem não funciona bem quando o layout muda, por exemplo, quando a janela de visualização é redimensionada ou o dispositivo é girado. Essa falha é corrigida no Chrome 81.

Interoperabilidade

Muitos navegadores têm suporte básico ao Snap de rolagem CSS. Consulte Posso usar o CSS Scroll Snap? para mais informações.

Atualmente, o Chrome é o único navegador a implementar o ajuste de rolagem após mudanças de layout. O Firefox tem um ticket aberto para implementar isso, e o Safari também tem um tíquete aberto para reajuste depois que o conteúdo de um rolador muda. Por enquanto, você pode simular esse comportamento adicionando o seguinte código 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 botão de rolagem será alinhado ao mesmo elemento.

Contexto

Snap de rolagem CSS

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

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

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

Exemplo de ajuste de rolagem 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 às mudanças de conteúdo e layout bloqueia alguns dos possíveis benefícios. Como mostrado no exemplo acima, os usuários precisam reajustar as posições de rolagem sempre que redimensionar uma janela para encontrar o elemento alinhado anteriormente. Alguns cenários comuns que causam a mudança de layout são:

• Redimensionar uma janela
• 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 os desenvolvedores durante a depuração. Os desenvolvedores também precisam considerar essas limitações ao tentar criar uma experiência dinâmica com 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 dessas mudanças de layout mencionadas ocorrer. Essa solução alternativa pode ser ineficaz quando o usuário espera que o rolador retorne ao mesmo conteúdo de antes. Qualquer outro tratamento com JavaScript parece anular a finalidade desse recurso de CSS.

Suporte integrado ao novo ajuste 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. Eles reavaliarão as posições de rolagem depois de mudar o layout e serão direcionados novamente à posição de ajuste mais próxima, se necessário. Se o botão de rolagem tiver sido alinhado anteriormente a um elemento que ainda existe após a mudança do layout, ele vai tentar voltar a ele. Preste atenção ao que acontece quando o layout muda no exemplo a seguir.

Posição de ajuste perdida

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

Posição de ajuste preservada

Girar um dispositivo não preserva as posições de ajuste no Chrome 81. O slide com NOPE permanece na visualização, mesmo que a orientação do dispositivo mude várias vezes.

Consulte a especificação para reajuste depois de mudanças de layout para mais detalhes.

Cuidado : o ajuste também é executado quando a página é carregada. Isso afeta o deslocamento de rolagem inicial dos controles de rolagem que usam 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? Consulte a seguinte interface de demonstração do chat para ver as imagens.

A adição de uma nova mensagem aciona o reajuste, que faz com que ela permaneça na parte de baixo no Chrome 81.

Trabalho futuro

No momento, todos os efeitos de rolagem de reajuste são instantâneos. Uma possível continuação é oferecer suporte ao novo ajuste com efeitos de rolagem suaves. Consulte o problema de especificação para ver mais detalhes.

Feedback

Seu feedback é muito importante para melhorar o reajuste depois de mudanças de layout. Portanto, faça um teste e informe aos engenheiros do Chromium o que você acha.