A partir do Chrome 81, não é mais necessário adicionar listeners de eventos para forçar refilmando.
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.
Limitações
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.
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.
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.
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.
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.