Suavizando scroll usando apenas CSS

Neste post vamos ensinar como suavizar a barra de rolagem usando apenas CSS. Muito usada em página Onepage, onde concentra todo o conteúdo em uma única página.

Vídeo demonstrativo:

Para suavizar a barra de rolagem, basta adicionar o código scroll-behavior: smooth ao elemento html do seu site para permitir que o efeito seja criado. Vale lembrar que também é possível adicionar o efeito em um elemento específico que também tenha barra de rolagem.

Exemplo do código:

html {
  scroll-behavior: smooth;
}

Exemplo do código funcionando:

See the Pen Como criar barra de rolagem suave by Cupcom Codes (@cupcomcodes) on CodePen.