post
Barra de rolagem (scrollbar) personalizada
Publicado em: 03/05/2022 / Atualizado em: 11/09/2024
É possível personalizar a barra de rolagem da maioria dos navegadores modernos, como é o caso do Google Chrome, apenas aplicando um trecho de código CSS em seu site ou pagina.
OBS: O código abaixo não funciona no mozilla firefox.
/* Estilos para navegadores baseados em WebKit */
::-webkit-scrollbar {
width: 12px; /* Largura da barra de rolagem */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Cor do fundo da barra de rolagem */
}
::-webkit-scrollbar-thumb {
background: #888; /* Cor do polegar da barra de rolagem */
border-radius: 10px; /* Bordas arredondadas do polegar */
}
::-webkit-scrollbar-thumb:hover {
background: #555; /* Cor do polegar ao passar o mouse */
}
/* Estilos para o Firefox */
* {
scrollbar-width: thin; /* Largura da barra de rolagem */
scrollbar-color: #888 #f1f1f1; /* Cor do polegar e do fundo */
}
Caso queira personalizar apenas uma DIV ou lista especifica da pagina, para evitar que ela fique extensa demais, use deste modo abaixo:
<!-- Listagem de exemplo --> <ul class="lista"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
.lista {
height: 100px; /*Ajuste a altura como quiser aqui.*/
overflow-y: scroll;
overflow-x: hidden;
}
.lista::-webkit-scrollbar {
width: 14px;
}
.lista::-webkit-scrollbar-track {
background: #E3E3E3;
border-radius: 100px;
}
.lista::-webkit-scrollbar-thumb {
background: #000;
border-radius: 100px;
}Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1660
ID de Referência: 1660
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.