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 refilmando.

Adam Argyle

Kaan Alsan

Yi Gu

Snap de rolagem do CSS permite que os desenvolvedores Web criem experiências de rolagem bem controladas declarando posições de ajuste de rolagem. Uma desvantagem da implementação atual é que o ajuste de rolagem não funciona bem quando o layout é alterado, como quando a janela de visualização é redimensionado ou o dispositivo é girado. Essa falha foi corrigida no Chrome 81.

Interoperabilidade

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

No momento, o Chrome é o único navegador a implementar o ajuste de rolagem após o layout mudanças. O Firefox possui uma ingresso aberto para implementando isso. O Safari também tem tíquete para fazer uma nova captura depois de um o conteúdo do botão de rolagem. Por enquanto, você pode simular esse comportamento adicionando o código a seguir 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á ajustado de volta ao mesmo .

Contexto

Ajuste de rolagem do CSS

O recurso Ajuste de rolagem do CSS permite que os desenvolvedores Web criem controles experiências de rolagem declarando posições de ajuste de rolagem. Essas posições garantir que o conteúdo rolável esteja devidamente alinhado com o contêiner para a resolver 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 de conteúdo.

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

Exemplo de ajuste de rolagem do CSS. No fim das contas, rolar o centro horizontal de uma imagem está alinhado ao 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 facilmente pelo conteúdo, mas a incapacidade de se adaptar às mudanças de conteúdo e layout bloqueia parte do potencial benefícios. Conforme o exemplo acima, os usuários têm que reajustar as posições de rolagem sempre que redimensionar uma janela para encontrar o elemento ajustado anteriormente. Alguns cenários comuns que fazem com que o layout mudança são:

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

Os dois primeiros cenários tornam o Scroll Snap do CSS menos atraente para os usuários e A terceira é um pesadelo para desenvolvedores durante a depuração. Os desenvolvedores também precisam considere essas deficiências ao tentar criar uma experiência dinâmica que é compatível com ações como adição, remoção ou movimentação de conteúdo.

Uma correção comum para isso é adicionar listeners que executam uma rolagem programática usando JavaScript para forçar a execução do ajuste sempre que qualquer um dos layouts mencionados as mudanças acontecem. Essa solução alternativa pode ser ineficaz quando o usuário espera para voltar ao mesmo conteúdo de antes. Qualquer tratamento adicional relacionado O JavaScript parece quase invalidar o propósito desse recurso de CSS.

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

As falhas mencionadas não existem mais no Chrome 81: os controles de rolagem permanecerão capturado mesmo depois de alterar o layout. Eles reavaliarão as posições de rolagem após alterando o layout e encaixando novamente na posição de ajuste mais próxima, se necessário. Se o botão de rolagem foi previamente ajustado a um elemento que ainda existe após o mudança de layout, o botão de rolagem tentará se voltar a ela. Preste atenção o que acontece quando o layout muda no seguinte exemplo.

Posição de ajuste perdida

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

Ajustar posição preservada

A rotação de um dispositivo mantém as posições de ajuste no Chrome 81. O slide que informa que NOPE permanece na área de visualização, mesmo que a orientação do dispositivo mude várias vezes.

Consulte a seção Reajustar após alterações de layout especificação para saber mais detalhes.

Cuidado : 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 alguns linhas de CSS:

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

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

Quer saber mais? Confira o seguinte chat de demonstração do usuário para recursos visuais.

Adicionar uma nova mensagem aciona o reajuste, fazendo com que ela se atenha à parte de baixo Chrome 81.

Trabalho futuro

No momento, todos os efeitos de rolagem de novo ajuste são instantâneos; um possível acompanhamento é para oferecer suporte ao novo ajuste com rolagem suave efeitos personalizados. Consulte o problema de especificação. para mais detalhes.

Feedback

Seu feedback é inestimável para melhorar a recaptura após alterações de layout, então continue e experimente e permita que os engenheiros do Chromium saber o que você pensar.