Se há uma coisa que as pessoas realmente querem da rolagem, é que ela seja suave. Historicamente, o Chrome tinha rolagem suave em alguns lugares, como quando os usuários rolavam com o trackpad ou deslizavam uma página em dispositivos móveis. No entanto, se o usuário tiver um mouse conectado, ele terá um comportamento de rolagem mais instável, o que é muito menos agradável esteticamente. Isso está prestes a mudar no Chrome 49.
A solução para o comportamento de rolagem nativa e orientada por entrada para muitos desenvolvedores foi usar bibliotecas, com o objetivo de remapeá-la para algo mais suave e agradável aos olhos. Os usuários também fazem isso usando extensões. No entanto, há desvantagens para bibliotecas e extensões que mudam a rolagem:
- Uma sensação de vale estranho. Isso se manifesta de duas maneiras: primeiro, um site pode ter um comportamento de rolagem suave, mas outro não. Assim, o usuário pode acabar se sentindo desorientado pela inconsistência. Em segundo lugar, a física de suavidade da biblioteca não corresponde necessariamente à da plataforma. Portanto, embora o movimento possa ser suave, ele pode parecer errado ou estranho.
- Aumento da propensão à contenção e ao engasgo da linha de execução principal. Como acontece com qualquer JavaScript adicionado à página, haverá um aumento na carga da CPU. Isso não é necessariamente um desastre, dependendo do que mais a página está fazendo. No entanto, se houver algum trabalho de longa duração na linha de execução principal e a rolagem tiver sido acoplada à linha de execução principal, o resultado líquido pode ser rolagens irregulares e instabilidade.
- Mais manutenção para os desenvolvedores, mais código para os usuários fazerem o download. Ter uma biblioteca para fazer a rolagem suave é algo que precisa ser atualizado e mantido, e isso vai aumentar o peso geral da página do site.
Essas desvantagens também são verdadeiras para muitas bibliotecas que lidam com comportamentos de rolagem, seja com efeitos de paralaxe ou outras animações acopladas ao rolagem. Elas costumam causar instabilidade, atrapalhar a acessibilidade e prejudicar a experiência do usuário. O rolagem é uma interação fundamental da Web, e alterá-la com bibliotecas precisa ser feito com muito cuidado.
No Chrome 49, o comportamento de rolagem padrão vai mudar no Windows, no Linux e no ChromeOS. O comportamento de rolagem antigo e escalonado vai ser desativado, e a rolagem vai ser suave por padrão. Não é necessário fazer mudanças no código, exceto talvez remover as bibliotecas de rolagem suave, se você as tiver usado.
Mais recursos de rolagem
Há outros recursos relacionados ao rolagem que vale a pena mencionar. Muitos de nós queremos efeitos acoplados ao rolagem, como paralaxe, rolagem suave para um fragmento de documento (como example.com/#somesection). Como mencionei anteriormente, as abordagens usadas hoje em dia podem ser prejudiciais para desenvolvedores e usuários. Há dois padrões de plataforma em desenvolvimento que podem ajudar: worklets de compositor e a propriedade CSS scroll-behavior.
Houdini
Os worklets do compositor fazem parte do Houdini e ainda não foram totalmente especificados e implementados. À medida que os patches forem lançados, será possível escrever JavaScript que será executado como parte do pipeline do compositor. Isso significa que os efeitos acoplados ao rolagem, como a paralaxe, serão mantidos perfeitamente sincronizados com a posição de rolagem atual. Considerando a forma como a rolagem é processada hoje, em que os eventos de rolagem são enviados periodicamente para a linha de execução principal (e podem ser bloqueados por outros trabalhos da linha de execução principal), isso seria um grande avanço. Se você tem interesse em worklets de compositor ou em qualquer outro recurso novo e incrível do Houdini, confira a postagem de introdução ao Houdini de Surma, as especificações do Houdini e compartilhe sua opinião na lista de e-mails do Houdini.
scroll-behavior
Quando se trata de rolagem baseada em fragmentos, a propriedade scroll-behavior do CSS pode ajudar. Se você quiser testar, saiba que o recurso já está disponível no Firefox e pode ser ativado no Chrome Canary usando a flag “Ativar recursos experimentais da plataforma da Web”. Se você definir o elemento <body> como scroll-behavior: smooth, todas as rolagens acionadas por mudanças de fragmento ou por window.scrollTo serão animadas sem problemas. Isso é muito melhor do que ter que usar e manter o código de uma biblioteca que tenta fazer a mesma coisa. Com algo tão fundamental quanto a rolagem, é muito importante evitar quebrar a expectativa do usuário. Portanto, enquanto esses recursos estão em fluxo, ainda vale a pena adotar uma abordagem de melhoria progressiva e remover todas as bibliotecas que tentam preencher esses comportamentos.
Role a tela para baixo
A partir do Chrome 49, a rolagem está ficando mais suave. Mas isso não é tudo: há mais melhorias potenciais que podem ser implementadas usando o Houdini e propriedades CSS, como smooth-scroll. Teste o Chrome 49, conte o que achou e, acima de tudo, deixe o navegador fazer a rolagem sempre que possível.