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

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.


/* 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.

Veja também!
Aprenda a criar uma textura de margaridas de forma simples no Illustrator

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.


/* 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.


.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.

Twittar

0 Compart.