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

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.