Como deixar o scroll de uma página suave? (nice scroll)

Neste artigo você vai aprender a como deixar o scroll de uma página suave, implementando um nice scroll em seu projeto web com JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre a biblioteca Nice Scroll e como implementá-la!

Primeiramente será necessário implementar o jQuery no projeto, podemos fazer isso via CDN, com a seguinte instrução:

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

Depois vamos adicionar a biblioteca Nice Scroll ao projeto, você pode checar a documentação clicando aqui, mas é bem fácil também

Vamos implementar a seguinte tag no nosso projeto:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js" integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig==" crossorigin="anonymous"></script>

Agora que temos todas as dependências instaladas, vamos simplesmente aplicar o Nice Scroll  a um container, que queremos modificar o scroll

Veja a aplicação:

$("body").niceScroll();

Aqui aplicamos a todo o body, e agora o scroll estará modificado

Você pode fazer diversas customizações que a biblioteca permite, por exemplo:

• Alterar cor;
• Alterar largura;
• Cor de background;
• Raio das bordas;
• e muito mais;

Para outras modificações, sugiro ver a documentação oficial, que foi linkada acima

Conclusão

Neste artigo vimos como deixar o scroll de uma página suave

Utilizamos para atingir este objeto a biblioteca jQuery e também a Nice Scroll

Para utilizar a Nice Scroll, a lib jQuery é um pré requisito, pois foi construída em cima da mesma

Logo se eu projeto não for possível a adição, sugiro buscar uma solução nativa para resolver o problema

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube