Como criar uma Scrollbar personalizada [Challenge]

 

Introdução

Fala programador(a), tudo bem com você?
Vamos ver aqui nesse vídeo um Onebitcode Challenge, que irá ser voltado para fazermos um scroll bar personalizado, por que ninguém merece ter um scroll bar padrão em uma página dark, né?

Resumo

A ideia aqui do Onebitcode Challege é fazer com que você se desafie a fazer alguma coisa, e caso não consiga cumprir, vou lhe ensinar passo a passo, fazendo você aprender algo novo. Vamos fazer nesse vídeo, uma barra de scroll personalizada.

Passo a passo

  1. Vamos estar já em uma pasta com arquivos html e css, para agilizarmos, basta você criar também e fazer o link delas.
  2. Vamos então começar no css com uma configuração básica inicial, vamos retirar o margin e padding de todos os elementos, colocar uma cor escura no background do body e também ativar o scroll fazendo com que o body tenha um tamanho grandinho
  3. Com isso, temos agora o nosso scroll bar ativo, conseguimos fazer a manipulação dele, faremos primeiro a manipulação do tamanho lateral do nosso scroll bar. Veremos que tudo irá sumir, mas aos poucos iremos colocando novamente.Vamos estar utilizando para fazer essa manipulação o webkit, que é um motor de renderização, que foi criado pela apple com intuito de fazer otimizações nas velocidades das páginas, e que podemos também fazer manipulações no html e css padrão das páginas com o webkit, que será o que faremos agora com o nosso scroll bar
  4. Iremos então manipular a cor do background da barra e também manipular a borda que ela terá
  5. Com isso já temos uma scroll bar muito mais bonita, podemos então fazer agora a manipulação do indicador da sidebar, fazendo ele aparecer novamente.
  6. Com isso, temos um sidebar 100% personalizado, fazendo isso de forma rápida e simples, que você pode deixar o seu site com uma outra cara apenas mudando essas pequenas coisas. Fora que se você quiser adicionar detalhes como hover, você consegue, fazendo com que seu site fique mais interativo e também chamativo.

Finalizamos esse Challenge tendo esse nosso scroll bar 100% personalizado, que espero que você faça um melhor do que esse que fiz, fazendo outras manipulações. Esse tipo de scroll bar não funciona no mozila, talvez não funcione em alguns outros navegadores, isso por conta de atualizações e versões.

Considerações finais

Então se você quiser aprender não só truques como esse, mas toda a manipulação com html, css e js, além de outras tecnologias fundamentais, nós temos o curso Programador Full Stack Javascript Profissional, para você entender e aprender programação de uma vez por todas.

Nos vemos nos próximos vídeos 😀

5 1 vote
Article Rating
março 2, 2022
Subscribe
Notify of
guest
1 Comentário
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pedro
Pedro
1 mês atrás

Muito bom! Aprendi aqui o que é ‘hover’ e alguns webkits, muito grato.

Feito com s2 por OneBitCode

1
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: