A partir do Chrome 81, não é mais necessário adicionar listeners de eventos para forçar o reajuste.
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.](https://web.developers.google.cn/static/articles/snap-after-layout/image/example-css-scroll-snap-b0e9b651c5dbf.png?authuser=6&hl=pt-br)
Limitações
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.
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.
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.
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.
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.