Modifique a barra de rolagem do seu site/blog com CSS3

Alguma das novidades na internet é pôr sua própria barra de rolagem, e cá entre nós, aquela antiga que tinha botões perdeu a graça. Com o uso de trackpads multitouch (multitoque) e scrolls de mouse, os botões perderam a função, onde, as principais empresas de sistemas operacionais, como a Canonical e a Apple, já removeram e atualizaram para uma nova mais clean e bonite. Na internet, você pode fazer do mesmo estilo, e isto é bem fácil, onde, você pode colocar facilmente, e o melhor, com CSS3, mas há um senão.

Resultado final: ignore minhas setas like Paint, mas eu achei que ficariam mais divertidas :P.

Simples é, mas tem um problema. Hoje, há vários motores de navegadores, e o que mais prevalece é o lindo, maravilhoso, que ajuda todo mundo e o melhor motor motor Webkit. Atualmente, os navegadores usam mais ele, pois até hoje, ele tem desvendado grandes coisas com o HTML5, e um exemplo claro do que seja ele é o Safari e Chrome, nos quais, são os principais utilizando o Webkit.

Ou seja, você pode até fazer, mas, por este método via CSS3, só funcionará apenas nos navegadores Webkit, mas há outros modos para se fazer em outros, que pode ser via Javascript, mas vou estudar mais a tecnologia em breve.

Tendo isto explicado sobre como pode funcionar, vamos ao que interessa.

Atenção: A dica é feita para quem sabe mexer com CSS. Faça por sua conta e risco, e nós não nos responsabilizamos por problemas no seu arquivo CSS, que é algo frequente para dar problema

É bem simples, basta abrir seu arquivo CSS e por isso nele (de preferência após body):

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 16px;
}
::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #666;
  -webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: #666;
  -webkit-border-radius: 3px;
}

O código pode ser personalizado sempre que puder.

Personalizando sua barra de rolagem

É algo bem simples para personalizar, e pode ser personalizado ao estilo do clássico CSS.

• ::-webkit-scrollbar: Responsável por escolher o tamanho e o que você vai atribuir à sua barra de rolagem;
• -webkit-scrollbar-track-piece: Área que fica ao fundo da barra de rolagem, ou seja, o caminho que a barra vai percorrer;
• ::webkit-scrollbar-thumb:vertical: Responsável por editar como será a scrollbar na vertical do site;
• ::-webkit-scrollbar-thumb:horizontal: Mesma coisa do que eu falei acima, só que, ao invés de ser na vertical, é na horizontal.

Isto é bem fácil, mas para personalizar, tem que saber ao máximo. Mas tome cuidado, pois ao mexer em algo além do que se há dentro das chaves ({ }), você pode danificar sua scrollbar personalizada e voltar para o método antigo, ou seja, com botões.

Infelizmente, a dica só funciona no Webkit, mas assim que eu descobrir em outros motores, eu aviso assim que puder. E aí, caro leitor, como ficou a sua?