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.
