Cores personalizadas da barra de rolagem do "Firefox"

Escrito por kevin lee | Traduzido por laura pinheiro
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Cores personalizadas da barra de rolagem do "Firefox"
Deixe a rolagem divertida, personalizando as barras de rolagem (Pixland/Pixland/Getty Images)

Os navegadores da web, como o "Firefox", possuem um código pré-escrito que determina sua aparência e funções. Se você criar sites para o "Firefox", esse código não poderá ser substituído e, consequentemente, não poderá alterar a aparência da barra de rolagem do navegador. No entanto, um código pode ser adicionado em seus documentos HTML, o qual aplica cores personalizadas nas barras de rolagem com elementos div, e que serão visíveis na página da web do "Firefox".

Outras pessoas estão lendo

Recipiente div

Muitos itens que você vê nas páginas da web se encontram nos recipientes div, os quais são elementos HTML que permitem o agrupamento de outros, como no exemplo a seguir:

<div> <input type="text" /> <input img src="umaImagem.jpg" />

Esse div contém uma caixa de texto e uma imagem. Se o tamanho da imagem exceder o tamanho do div, barras de rolagem horizontal e vertical aparecerão permitindo-lhe percorrer pelo recipiente div. Você pode mudar a cor dessas barras usando o "jQuery", uma biblioteca de JavaScript gratuita que funciona com todos os navegadores.

"JScrollPane"

O "JScrollPane" é um plugin útil do "jQuery" que muda o funcionamento padrão da barra de rolagem do "Firefox". Ele é feito por pequenos pedaços do código do "jQuery" que você pode usar com a biblioteca básica do "jQuery", a qual pode ser disponibilizada em um documento HTML, adicionando o seguinte código JavaScript no topo da seção do documento HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Então você poderá usar o plugin "JScrollPane" para colorir as barras de rolagem, fazendo seu download pelo painel do site "jScroll". O site também fornece um link de "Support" (Suporte) no topo da página que pode ajudá-lo a adicionar o plugin na sua página da web.

"FleXcroll"

O "FleXcroll", outro plugin "jQuery", também faz com que as páginas da web se destaquem pelo uso de cores para personalizar as barras de rolagem div. Ao visitar o site "fleXcroll", é possível ver amostras do plugin em ação, clicando em um dos links na seção "Live Example" (Exemplo ao vivo). Cada exemplo mostra um estilo de efeito diferente, que pode ser usado quando quiser personalizar suas barras de rolagem. Se precisar de ajuda com o plugin, clique no link "Programming Guide" (Guia de Programação) localizado na parte superior da página.

"RangeInput"

O site "RangeInput" apresenta uma barra de rolagem branca impressionante que aparece na parte inferior do seu recipiente div. Esse div usa o plugin do "Rangeinput" para alterar a cor e a forma as barras de rolagem. Se quiser usá-lo no "Firefox", leia a documentação fornecida no site do "RangeInput" e clique no link "Standalone Version" (Versão padrão) perto da parte inferior da página. A nova página que abrir exibirá um div usando o plugin. O código fonte da página pode ser visto, copiado e adicionado ao código do seu próprio documento HTML, livremente.

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