Se há algo que as pessoas realmente querem ao rolar a tela, é que ela seja suave. Historicamente, o Chrome tem uma rolagem suave em alguns lugares, como quando os usuários rolam com os trackpads ou navegam pela página em dispositivos móveis. Mas, se o usuário conectar o mouse, terá um comportamento de rolagem mais instável, que não é esteticamente agradável. Isso tudo está prestes a mudar no Chrome 49.
A solução para o comportamento de rolagem nativo em degraus e orientado por entradas para muitos desenvolvedores tem sido usar bibliotecas, com o objetivo de remapeá-lo para algo mais suave e agradável aos olhos. Os usuários também fazem isso usando as extensões. No entanto, as bibliotecas e as extensões têm desvantagens que mudam a rolagem:
- Uma sensação incrível de vale. Isso se manifesta de duas maneiras: primeiro, um site pode ter um comportamento de rolagem suave, mas outro não, de modo que o usuário pode se sentir desorientado pela inconsistência. Em segundo lugar, a física da suavidade da biblioteca não corresponde necessariamente à da plataforma. Portanto, embora o movimento seja suave, ele pode parecer errado ou estranho.
- Maior propensão a instabilidade e contenção de linhas de execução principais. Assim 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 estiver fazendo, mas se houver algum trabalho de longa duração na linha de execução principal e a rolagem estiver acoplada à linha de execução principal, o resultado final poderá ser rolagem e instabilidade.
- Mais manutenção para desenvolvedores, mais código para os usuários fazerem o download. Ter uma biblioteca para rolagem suave precisa ser algo que precisa ser atualizado e mantido, e isso aumenta o peso geral da página do site.
Essas desvantagens geralmente também são verdadeiras para muitas bibliotecas que lidam com comportamentos de rolagem, sejam efeitos de paralaxe ou outras animações de rolagem. Muitas vezes, eles acionam instabilidade, atrapalham a acessibilidade e geralmente prejudicam a experiência do usuário. A rolagem é uma interação fundamental da web, e alterá-la com bibliotecas deve ser feita com muito cuidado.
No Chrome 49, o comportamento de rolagem padrão mudará para o Windows, Linux e ChromeOS. O antigo comportamento de rolagem gradual será desativado, e a rolagem será suave por padrão. Nenhuma mudança no código é necessária, exceto talvez remover as bibliotecas de rolagem suave, caso você as tenha usado.
Mais recursos de rolagem
Há outros recursos relacionados a rolagem nas obras que também valem a pena mencionar. Muitos de nós querem efeitos associados à rolagem, como paralaxe e rolagem suave até um fragmento de documento (como example.com/#somesection). Como mencionei antes, as abordagens usadas atualmente podem muitas vezes ser prejudiciais para desenvolvedores e usuários. Há dois padrões de plataforma em que estamos trabalhando e que podem ajudar: Worklets do Compositor e a propriedade CSS scroll-behavior.
Houdini
Os Worklets do Compositor fazem parte do Houdini e ainda não foram totalmente especificações e implementados. Dito isso, como os patches são encerrados, eles permitem escrever JavaScript que é executado como parte do pipeline do compositor, o que, em geral, significa que os efeitos acoplados à rolagem, como paralaxe, serão mantidos perfeitamente em sincronia com a posição de rolagem atual. Considerando a forma como a rolagem é processada hoje, em que os eventos de rolagem são enviados apenas periodicamente para a linha de execução principal (e podem ser bloqueados por outro trabalho da linha de execução principal), isso representa um grande salto para frente. Se você tem interesse nos Worklets do Compositor ou em outros recursos novos e incríveis da Houdini, confira a postagem de introdução ao Houdini de Surma (em inglês), as especificações do Hudini (links em inglês) e contribua com sua opinião para a lista de e-mails do Hudini.
comportamento de rolagem
Quando se trata de rolagem baseada em fragmento, a propriedade scroll-behavior CSS (link em inglês) pode ajudar de outra maneira. Para testar, você fica feliz em saber que ele já está disponível no Firefox. Você pode ativá-lo no Chrome Canary usando a sinalização "Ativar recursos experimentais da plataforma 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 suavemente. 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, embora esses recursos estejam em fluxo, ainda vale a pena adotar uma abordagem de Aprimoramento progressivo e remover todas as bibliotecas que tentam polyfill para esses comportamentos.
Navegue e role a tela
A partir do Chrome 49, a rolagem está mais suave. Mas isso não é tudo: há mais melhorias potenciais que podem ser feitas com as propriedades Houdini e CSS, como smooth-scroll. Experimente o Chrome 49, dê sua opinião e, acima de tudo, deixe o navegador fazer a rolagem quando você puder.