post

Barra de rolagem (scrollbar) personalizada

Publicado em: 03/05/2022

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.

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: #E3E3E3;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 100px;
}

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;
}

Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários