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

14/01/19     CSS Tutorial Web Design

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.

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.

Publicidade

Publicidade


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

PORVictor Brito

Diretor de criação amante da área de Branding, fundador do blog Bons Tutoriais onde compartilha suas experiências com artigos sobre Design Gráfico, Web Design e outras coisas mais. Você pode encontrá-lo postando no Publicinove ou em sua agência - Criativito Comunicação.
+ posts

Publicidade

Publicidade

Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress