Como personalizar o scroll do navegador e deixar nas cores de seu site



Description

Já está cansado da barra de rolagem sempre igual em seu site? Não aguenta mais ver a cor cinza nela e aquele mesmo tamanho e fica pensado se existe alguma maneira de customizar a mesma? Bom, para sua felicidade existe sim e aqui você vai aprender pois este é o nosso tutorial de hoje.

Clique aqui e veja o que vai aprender a fazer, então chega de enrolação e vamos lá.

1. Personalizar a barra de rolagem

Neste exemplo vamos alterar a largura e a altura de nossa barra de rolagem, além de trocar a cor do fundo e também da própria barra.

Confira abaixo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
/* personalizar a barra em geral, aqui estou definindo 10px de largura para a barra vertical
e 10px de altura para a barra horizontal */
::-webkit-scrollbar {
width:10px;
height: 10px;
}
 
/* aqui é para personalizar o fundo da barra, neste caso estou colocando um fundo cinza escuro*/
::-webkit-scrollbar-track {
background:#333;
}
 
/* aqui é a alça da barra, que demonstra a altura que você está na página
estou colocando uma cor azul clara nela*/
::-webkit-scrollbar-thumb {
background: #2e9dd8;
}

2. Degrade na barra de rolagem

Também é possível adicionar degrade em sua barra de rolagem, para isso, ao invés de colocar uma cor chapada, basta utilizar a propriedade ‘linear-gradient’ e definir quais as cores que você deseja usar, mas tem mais uma coisinha que precisa ser alterada.

Se você apenas substituir a cor chapada pelo gradiente, a barra de rolagem terá seu degrade na vertical também sendo para barras horizontais é necessário ter um degrade na horizontal, então para isso basta dizer que para barras horizontais você deseja um novo degrade, assim como no código abaixo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
/* degrade para a barra vertical */
::-webkit-scrollbar-thumb {
background: #2e9dd8;
background: -moz-linear-gradient(top, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%);
background: -webkit-linear-gradient(top, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%);
background: linear-gradient(to bottom, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}
 
/* degrade para a barra horizontal com a direção do degrade alterada */
::-webkit-scrollbar-thumb:horizontal {
background: #2e9dd8;
background: -moz-linear-gradient(left, #333333 0%, #3f69b1 25%, #2e9dd8 50%, #3f69b1 76%, #333333 100%);
background: -webkit-linear-gradient(left, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%);
background: linear-gradient(to right, #333333 0%,#3f69b1 25%,#2e9dd8 50%,#3f69b1 76%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}

3. Barra de rolagem personalizada apenas em uma div em específico

Para personalizar sua barra de rolagem em determinados lugares sem mexer na barra do site em si, basta dizer qual o elemento que você quer que ela seja estilizada, confira.

 
01
02
03
04
05
06
07
08
09
10
11
12
.scroll::-webkit-scrollbar {
width:10px;
height: 10px;
}
 
.scroll::-webkit-scrollbar-track {
background:#333;
}
 
.scroll::-webkit-scrollbar-thumb {
background: #2e9dd8;
}

Bom é isso, é assim que se personaliza a barra de rolagem, simples, não é?

Espero que tenham gostado, até a próxima.

  • Curtir (+1) 1


Recommended Comments

Podia ser fácil assim também para todos os navegadores mas no firefox só da pra muda a cor com muuuito javascript

obrigado pela dica vai ajuda muita gente

  • Curtir (+1) 1

Share this comment


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a Comment

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.