Barra de rolagem (scrollbar) personalizada - Bruno Devx - BR Criativus

post #1660

Barra de rolagem (scrollbar) personalizada

Publicado em: 03/05/2022 / Atualizado em: 11/09/2024

Categorias: BlogCSS

É 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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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.

Clique aqui e entre em contato