Neste artigo vamos mergulhar no mundo das barras de rolagem. Eu sei, não parece muito glamoroso, mas acredite em mim, uma página bem projetada anda de mãos dadas com uma barra de rolagem correspondente. A barra de rolagem cromada antiquada simplesmente não se encaixa tanto.
Estaremos analisando os detalhes minuciosos de uma barra de rolagem e, em seguida, veremos alguns exemplos interessantes.
Componentes de uma barra de rolagem
Isso é mais uma atualização, na verdade. Há um monte de posts aqui no CSS-Tricks que entram em detalhes profundos quando se trata de estilo personalizado da barra de rolagem em CSS.
Para estilizar uma barra de rolagem, você precisa estar familiarizado com a anatomia de uma barra de rolagem. Dê uma olhada nesta ilustração:
Os dois principais componentes a ter em mente aqui são:
- A pista é o plano de fundo abaixo da barra.
- A polegar é a parte que o usuário clica e arrasta.
Podemos alterar as propriedades da barra de rolagem completa usando o prefixo do fornecedor::-webkit-scrollbar seletor. Podemos dar à barra de rolagem uma largura fixa, cor de fundo, cantos arredondados… muitas coisas! Se estivermos personalizando a barra de rolagem principal de uma página, podemos usar ::-webkit-scrollbar diretamente no elemento HTML:
html::-webkit-scrollbar {
/* Style away! */
}Se estivermos personalizando uma caixa de rolagem que é o resultado de overflow: scroll, então podemos usar ::-webkit-scrollbar nesse elemento em vez disso:
.element::-webkit-scrollbar {
/* Style away! */
}Aqui está um exemplo rápido que estiliza a barra de rolagem do elemento HTML para que fique larga com um fundo vermelho:
E se quisermos apenas alterar o polegar ou a faixa da barra de rolagem? Você adivinhou - temos pseudo-elementos prefixados especiais para esses dois: ::-webkit-scrollbar-thumb e ::-webkit-scrollbar-track, respectivamente. Aqui está uma ideia do que é possível quando juntamos todas essas coisas:
Chega de escovar! Quero mostrar três graus de estilo personalizado da barra de rolagem e, em seguida, abrir uma grande e velha vitrine de exemplos extraídos de toda a web para inspiração.
Barras de rolagem simples e elegantes
Uma barra de rolagem personalizada ainda pode ser mínima. Reuni um grupo de exemplos que alteram sutilmente a aparência, seja com uma leve mudança de cor no polegar ou na faixa, ou algum estilo de luz no plano de fundo.
Como você pode ver, não precisamos enlouquecer quando se trata de estilo da barra de rolagem. Às vezes, basta uma mudança sutil para aprimorar a experiência geral do usuário com uma barra de rolagem que corresponda ao tema geral.
Barras de rolagem atraentes e legais
Mas vamos admitir: é divertido exagerar um pouco e exercitar a criatividade. Aqui estão algumas barras de rolagem estranhas e únicas que podem ser “demais” em alguns casos, mas com certeza são atraentes.
Mais um…
Que tal levarmos a barra de rolagem para dar uma volta em um trem para o polegar e os trilhos para o, bem, o trilho!
