W3docs
pt
Entrar

Propriedade CSS scrollbar

Use a propriedade CSS scrollbar para criar temas personalizados para barras de rolagem. Veja valores e exemplos.

O conjunto de pseudo-elementos CSS ::-webkit-scrollbar é um hook de estilo proprietário que permite aos designers criar temas personalizados para as barras de rolagem nativas do navegador.

Informação

Esses pseudo-elementos são expostos por meio do prefixo de fornecedor -webkit e são suportados principalmente em navegadores baseados em Chromium. Não são suportados no Firefox ou Safari. Para maior compatibilidade entre navegadores, considere usar as propriedades padrão scrollbar-width e scrollbar-color.

Os pseudo-elementos ::-webkit-scrollbar são compostos por sete partes diferentes que, juntas, formam um elemento de interface de barra de rolagem completo. Esses sete pseudo-elementos são os seguintes:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-scrollbar-resizer

Uma barra de rolagem só aparece quando o conteúdo de um elemento é maior que sua caixa, portanto, estilizá-la está diretamente relacionado à família de propriedades overflow — overflow-x e overflow-y permitem controlar a rolagem horizontal e vertical de forma independente.

Sintaxe

Para estilizar barras de rolagem, você aplica regras CSS diretamente aos pseudo-elementos ::-webkit-scrollbar no contêiner de rolagem. É possível direcionar qualquer elemento com overflow definido como scroll ou auto, não apenas o body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Exemplo dos pseudo-elementos scrollbar:

Exemplo de código CSS scrollbar

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Experimente Você Mesmo »

Exemplo dos pseudo-elementos scrollbar com ::-webkit-scrollbar-track e ::-webkit-scrollbar-thumb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Experimente Você Mesmo »

Barras de rolagem padrão entre navegadores

Como os pseudo-elementos ::-webkit-scrollbar funcionam apenas em navegadores baseados em Chromium, o CSS Working Group introduziu duas propriedades padrão que o Firefox suporta atualmente e que os motores Webkit/Blink agora também reconhecem: scrollbar-width e scrollbar-color.

  • scrollbar-width — define a espessura. Aceita as palavras-chave auto (padrão), thin ou none (oculta a barra de rolagem mantendo o elemento rolável).
  • scrollbar-color — recebe duas cores: primeiro a cor do thumb (controle deslizante) e depois a cor da track (trilha).
.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

Uma abordagem robusta é declarar as propriedades padrão primeiro como base e, em seguida, acrescentar as regras ::-webkit-scrollbar para um controle mais detalhado nos navegadores Chromium que precisam disso:

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}
Informação

Use scrollbar-width: thin e scrollbar-color quando precisar apenas recolorir ou tornar a barra de rolagem mais fina em todos os navegadores modernos. Recorra aos pseudo-elementos ::-webkit-scrollbar somente quando precisar estilizar partes individuais (botões, peça da trilha, canto) que as propriedades padrão não alcançam. O arredondamento do thumb com border-radius é exclusivo do -webkit-.

Pseudo-elementos

Pseudo-elementoDescrição
::-webkit-scrollbarA própria barra de rolagem.
::-webkit-scrollbar-buttonOs botões da barra de rolagem.
::-webkit-scrollbar-trackA trilha da barra de rolagem.
::-webkit-scrollbar-track-pieceA parte da trilha não coberta pelo controle deslizante.
::-webkit-scrollbar-thumbO controle deslizante arrastável.
::-webkit-scrollbar-cornerO canto inferior da barra de rolagem, onde as barras horizontal e vertical se encontram.
::-webkit-scrollbar-resizerO controle de redimensionamento arrastável que aparece no canto inferior de alguns elementos.

Prática

Prática
Quais propriedades CSS são utilizadas para alterar a aparência das barras de rolagem?
Quais propriedades CSS são utilizadas para alterar a aparência das barras de rolagem?
Was this page helpful?