Como aumentar a largura da barra de rolagem usando o CSS

Escrito por sara williams | Traduzido por sophia coe
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como aumentar a largura da barra de rolagem usando o CSS
Navegadores com o Webkit, como o Safari e o Chrome, suportam O CSS nas barras de rolamento (Jupiterimages/Comstock/Getty Images)

O Internet Explorer introduziu configurações de cor para barras rolantes na versão IE 5.5, mas os estilos para essas barras nunca se tornaram uma parte oficial de qualquer especificação do CSS. Entretanto, os navegadores com o Webkit, como o Safari e o Chrome, suportam o CSS nas barras de rolamento, além de permitirem que você mude a largura delas. Esses browsers usam pseudo-elementos e o prefixo “webkit” para permitir que você mude os estilos em uma variedade de peças da barra de rolagem, incluindo opções de faixa e seta.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo da folha de estilo em um Notepad ou em um editor de código. Encontre o seguinte arquivo CSS no cabeçalho do HTML do seu website:

    <link rel=”stylesheet” href=”path/to/style.css” type=”text/css” />

    Escreva o seu código CSS na parte inferior da folha de estilo. Se a sua página da web não usar folhas de estilo externas, acrescente o CSS entre os rótulos “<style>” no corpo do HTML.

  2. 2

    Adcione essas regras de estilo:

    ::-webkit-scrollbar { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-thumb { }

    Os dois pontos duplos indicam pseudo-elementos no CSS, eles não foram criados por você no código HTML; barras rolantes de navegador estão dentro dessa categoria.

  3. 3

    Configure a largura dentro de “::-webkit-scrollbar {}”:

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

    Configurar esta propriedade isolada não cria uma barra de rolagem que funcione no Safari ou no Chrome, pois ambos os navegadores desabilitam todos os estilos de barra de rolamento quando se configura qualquer propriedade usando os pseudo elementos, assim você acabará com uma barra de rolagem vazia e invisível.

  4. 4

    Dê à barra de rolagem uma cor de fundo:

    ::-webkit-scrollbar-track { background: #eee; }

  5. 5

    Acrescente uma cor de fundo à peça "thumb":

    ::-webkit-scrollbar-thumb { background: #000; }

    Essa peça é parte da barra rolante que o usuário pode clicar e arrastar a fim de fazê-la subir e descer.

Dicas & Advertências

  • Adicione “border-radius” às peças da barra de rolagem para criar cantos arredondados; coloque “box-shadow” no valor de inserção a fim de acrescentar profundidade à barra. Depois, duplique-a e remova a parte “webkit” de cada regra, se essas barras se tornarem uma parte oficial do conjunto de especificação do CSS - pelo World Wide Web Consortium, ou W3C - o seu código estará pronto para ser usado por outros navegadores.
  • Até o momento da publicação deste artigo, os navegadores que não têm o Webkit, como o IE, Firefox e Opera não suportam o CSS nas barras de rolagem.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível