CSS Smooth Scroll (Rolagem suave)

Melhorar a experiência do usuário em aplicativos da Web sempre foi uma prioridade para mim. Sempre volto ao mesmo pensamento que tenho há 20 anos: “usuários esperam um aplicativo Web funcione – vamos fazer com que o aplicativo seja agradável de usar”. Ao longo dos anos, empregamos o JavaScript para aprimorar a experiência do usuário, mas, com o tempo, essas estratégias se tornaram desajeitadas ou foram incorporadas às próprias linguagens da Web. Um desses recursos é a rolagem suave, uma grande melhoria na experiência do usuário, mas irritante se não for perfeita. O senhor sabia que é possível implementar a rolagem suave apenas com CSS?

A scroll-behavior A propriedade CSS controla a estratégia de rolagem para elementos de estouro com comportamento de rolagem e somente quando acionada por propriedades de navegação ou CSSOM. O padrão scroll-behavior é autoque não representa nenhum efeito visual: rolagem imediata até o elemento de destino sem animação. Para proporcionar aos usuários uma experiência de rolagem suave, é possível usar o parâmetro smooth o valor:

/* slide between items */
.slideshow ul {
  scroll-behavior: smooth;
}

É claro que o usuário perde algum controle visual ao usar uma API nativa do navegador, principalmente a velocidade e a curva da animação. O lado positivo é que não é necessário adicionar kilobytes de JavaScript que precisam ser mantidos para obter um efeito muito semelhante!