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