Scrollbar no Firefox

Por: Henrique Costa PereiraMonday 16 October 2006 às 13:16

Uma das coisas que eu mais odeio no Firefox é o fato de a barra de rolagem (scrollbar) vertical não aparece por default mesmo quando não há conteúdo para dar rolagem, como é no Internet Explorer. Ou seja, quando não há conteúdo para rolagem vertical, o Firefox não exibe e não ocupa o espaço que será utilizado quando o conteúdo for suficiente para dar rolagem. Isso causa um efeito de realinhar o conteúdo horizontalmente toda vez que você vai pra uma página em que dá a rolagem vertical. Isso acontece por que o Firefox coloca essa scrollbar no mesmo espaço reservado para o site. O resultado é um site dançante que se realinha (principalmente sites centralizados) toda vez que a barra de rolagem vertical aparece ou desaparece.

Para evitar isto, existe uma forma de dizer ao Firefox por CSS, que mesmo quando o conteúdo vertical não é suficiente para dar rolagem, a barra deveria existir assim mesmo, só que esmaecida. Para isso basta colocar a seguinte regra no início da sua folha de estilos:


  html {
     overflow: -moz-scrollbars-vertical;
  }

Se você for experto já percebeu que isso é um código proprietário do Mozilla Firefox e que não funciona (e nem faz sentido) pra nenhum outro browser. Eu encontrei isso navegando nas documentações do Firefox . Sim, sua folha de estilos não vai passar no validador da W3C. Não, eu sinceramente não me importo em não ter minha folha de estilos validada. O único validador que eu utilizo é o Tidy e somente quando eu suspeito que tem algo de errado no meu CSS. Daí ele me ajuda a encontrar.

Este assunto de validar a folha de estilos fica pra um próximo post. De qualquer maneira esta regrinha funciona perfeitamente no Firefox impedindo com que seu site se realinhe toda vez que o conteúdo der rolagem vertical.

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!

Tags: CSS Firefox Revolução Etc Scrollbar rolagem

43 Comentários para “Scrollbar no Firefox”

# 1° Chan Monday 16 October 2006 às 01:16 PM GMT

Verdade !!! é muito ruim esse lance do scroll, valeu a dica vai ser bem útil pra mim… brigadao

# 2° Thiago Machado Monday 16 October 2006 às 01:16 PM GMT

boa essa!!

e eu tb não me importo e uso tidy

afinal, produção em série é oq liga. (desde que bem treinado)

abraço CADE A VERSAO PRA IMPRESSÃO POMBAS ??
hehehe

# 3° Ariel Monday 16 October 2006 às 02:16 PM GMT

muito bom, vlw!

# 4° Christiano Milfont Monday 16 October 2006 às 02:16 PM GMT

Henrique, mas aí não caimos no mesmo problema que existia? ter que usar uma especificação proprietária?
se por algum motivo o firefox um dia chegasse a ser supremacia como o IE foi… estaríamos fazendo o que fazem com o IE hoje, não?
até hoje enfrento sites que so funcionam no IE, aqui onde trabalho tem um sistema que resolvemos nem deixar abrir em outro browser enquanto não consertarem, para evitar tanto chamado…
sei que uma marcação ou uma tag não provocaria um crash, mas estaríamos abrindo a porta para voltar toda a tosqueira que se fazia, afinal princípios são princípios e nunca devem ser relegados…

# 5° Alenônimo Monday 16 October 2006 às 02:16 PM GMT

Parei de validar estritamente os documentos no W3C quando percebi que seus validadores não são lá muito válidos. Vale o bom senso nessas horas.

A sugestão realmente é muito boa.

# 6° Carlos Eduardo Monday 16 October 2006 às 05:16 PM GMT

Sei lá… Nunca me incomodei com esse lance da barra de rolagem.

# 7° Alexandre Fugita Monday 16 October 2006 às 05:16 PM GMT

Engraçado, eu acho exatamente o contrário… ficava incomodado com a barra no IE qdo não era necessária…

# 8° Rafael Dourado Monday 16 October 2006 às 06:16 PM GMT

O próprio tempo de transição de uma página a outra já corta o efeito de mudança de posicionamento.
Isso só me incomoda quando é uma aplicação Ajax como o Netvibes. Quando mudo de uma aba com poucos feeds para uma com muitos o conteúdo se desloca um pouco.
Cuidado com essa história de validar não é importante porque pelo visto tem muita gente com um pensamento binário de ou valida tudo ou não valida nada.

# 9° Rodrigo Monday 16 October 2006 às 06:16 PM GMT

Nunca tinha reparado nesse detalhe do firefox! Mesmo porque os portais que crio são todos alinhados à esquerda (padrão da agência que trabalho). Mas vou ficar atento à isso. Valeu pela dica!

# 10° Rafael Arcanjo Monday 16 October 2006 às 07:16 PM GMT

Se eu entendi direito, concordo com o Alexandre Fugita.

# 11° Shino Monday 16 October 2006 às 07:16 PM GMT

Isso faz tanta diferença assim? o.o

# 12° Zephon Monday 16 October 2006 às 09:16 PM GMT

No Firefox 2.0 RC3 isso não acontece… Sendo que dependendo da aplicação, não é necessário colocar este código no CSS do site mas em \Arquivos de programas\Mozilla Firefox\res\html.css a não ser que você esteja desenvolvendo um site que mude sua estrutura drasticamente e uma página a outra e queira evitar este problema.

# 13° Jader Rubini Monday 16 October 2006 às 09:16 PM GMT

Ótima dica.
Eu também detesto isso. Principalmente em formulários.

# 14° Cristiano Dias Monday 16 October 2006 às 09:16 PM GMT

Esse cara é bom.

# 15° Eugenio Grigolon Tuesday 17 October 2006 às 10:17 AM GMT

Ótima dica, mas como disseram #6 e #7, acho que não é um problema tão grande assim ter ou não a barra de rolagem.

Mas valeu pela dica ;)

# 16° Regionaldo Sousa Tuesday 17 October 2006 às 11:17 AM GMT

Concordo com o Christiano Milfont.
Se todos nós tivermos que fazer isso em todos os sites, só para o mozilla, de que adiantaram as brigas para o IE seguir os padrões?

# 17° Ivo Gomes Tuesday 17 October 2006 às 01:17 PM GMT

A minha opinião é que o espaço no browser é mais importante do que a barra de rolagem. Por isso acho que não faz sentido estar a remover espaço à página só porque “não gosto” de ver a barra de rolagem a aparecer e a desaparecer (com o consequente realinhamento da página). Nos dias que correm, o espaço disponível no ecrã é importante demais para ser desperdiçado dessa forma.
Faz todo o sentido não haver barra nenhuma se tal não justifique a sua presença. É uma questão de aproveitamento de espaço ao máximo. No Safari e Opera também acontece o mesmo. Aliás, só o IE é que tem esse comportamento de mostrar sempre a barra de rolagem!

# 18° Scrollbar no Firefox « [REF] Tuesday 17 October 2006 às 02:17 PM GMT

[...] Link [...]

# 19° JOrge Wagner Tuesday 17 October 2006 às 05:17 PM GMT

Experto? Expert e esperto? ;)

# 20° Links comentados via del.icio.us - 3 » Japs Wednesday 18 October 2006 às 09:18 AM GMT

[...] O primeiro link de hoje: Scrollbar no Firefox, foi escrito pelo Henrique e trata de como sempre deixar a scrollbar do Firefox ativa, pois como todos que usam o Firefox sabem que a scrollbar não aparece por default, apenas em páginas que possuem rolagem, então quem quiser que a barra de rolagem sempre apareça, lei o artigo. [...]

# 21° Ricardo Seiji Wednesday 18 October 2006 às 09:18 AM GMT

Concordo que não seja um problema tão grande, mas é um detalhe que incrivelmente todo cliente (pelo menos, os que já tive) nota. E isso torna-se ainda mais incômodo em sistemas com interface web.

Interessante a solução a pesar de concordar que desse modo podemos cair na mesma questão do uso de códigos propietários no IE.

# 22° Samuel Guilherme Wednesday 18 October 2006 às 06:18 PM GMT

Eu nunca me importei com a barra de rolagem. Pra ser sincero até gosto de ela não aparecer quando não há conteúdo a ser “rolado”. Aí vai o gosto de cada um.

# 23° Anderson Sá Thursday 19 October 2006 às 12:19 PM GMT

Solução simples e boa!
É muito estranho, de repente o scroll sumir e aparecer. Incomoda bastante, principalmente em sites que possuem páginas curtas e longas verticalmente.

# 24° Manoel Netto Tuesday 24 October 2006 às 11:24 AM GMT

Como já foi disposto, eu já me incomodei muitas vezes com o inverso, o fato da barra no IE ocupar o espaço da tela que eu gostaria de usar ao máximo, em hotsites por exemplo. Na agência onde trabalhava, rolavam muitos hotsites de lançamentos imobiliários, em Flash, retangulares com um anúncio, e aquela “barrinha esmaecida” do IE sempre era questionada pelo cliente: “Não tem como tirar essa barrinha, já que não tem rolagem?” … SEMPRE!

Passei a apresentar os hotsites no FF e aproveitei pra catequisá-lo como usuário. ;-)

# 25° Luis Vulcanis Friday 3 November 2006 às 12:3 PM GMT

Cada um cada um… Sempre odiei a barra que o explorer coloca mesmo quando não há conteúdo. E uma das coisas que eu gosto no fire-fox é justamente o fato de ele não colocar a barra…

acabo usand overflow: auto; no IE pra tirar a barra…

é a vida… uns gostam de avermelho e outros de grená…

# 26° Anderson Custódio de Oliveria Saturday 4 November 2006 às 04:4 AM GMT

Na verdade não precisa usar o seletor HTML pode ser o body mesmo!

# 27° Genima Pina Monday 6 November 2006 às 02:6 PM GMT

Antes tarde do que nunca…

Mas vc pode simplesmente usar:

html {height:100%; margin-bottom:1px;/* Não oculta a barra de rolagem em Firefox */}

# 28° Mau Wednesday 8 November 2006 às 12:8 AM GMT

Ja pensou o dia que vc ver o seu site no Firefox rodando no Linux, vais ter um ataque de nervos…

# 29° Vinícius Camargo Thursday 25 January 2007 às 07:25 PM GMT

Boa tarde Henrique! Eu tenho um problema com a barra de rolagem um pouco diferente. Possuo um site na internet (da minha banda) no qual uso um script para editar as cores da “scrollbar”:
body { scrollbar-face-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-base-color: #000000;
scrollbar-track-color: #000000;}
Este script funciona normalmente no meu Internet Explorer, mas o FireFox recusa a entender esta linha de comando. Existe algum código similar que seja interpretado corretamente pelo FireFox, ou alguma maneira de adaptar este que eu uso atualmente?
Site: http://www.fallover.com.br
Valeu cara, um abraço!

# 30° Blog HotSync » Coleção dicas CSS Monday 7 May 2007 às 04:7 PM GMT

[...] Básico, mais ajuda. Li esta dica no Revolução.etc. [...]

# 31° Ricardo Monday 25 June 2007 às 09:25 PM GMT

Solução dos problemas (link)
http://www.hesido.com/web.php?page=customscrollbar

# 32° Everton Fraga Wednesday 18 July 2007 às 04:18 AM GMT

Boa! essa semana mesmo, estava tendo problemas com isto!
mas ao invés de xingar o FF, eu xinguei o IE! heheheh

# 33° Leandro Wednesday 22 August 2007 às 01:22 PM GMT

Gostei, mas vc sabe como faz pra mudar a cor pro firefox ? Por css eu n estou conseguindo.

# 34° Matheus de Oliveira Friday 31 August 2007 às 03:31 AM GMT

Muito boa a dica…mas…
Eu já havia reparado nisso e encontrei uma outra forma, que eu considero melhor…
Sabemos que barra de rolagem que vemos está no elemento BODY (ou HTML, não sei ao certo), e que o overflow coloca, ou tira uma barra de rolagem num elemento, então é só usá-lo:

body{
overflow:scroll;
}

E o melhor, é validade pela W3C…O único problema é que também coloca a barra horizontal, pra resolver isso dá pra usar o overflow-y (este não é válidado pela W3C, mas é aceito por mais de um navegador, pelo menos o IE e o FF):

body{
overflow-y:scroll;
}

Bom, esta é uma solução que eu encontrei antes de ver este artigo, e prefiro, pois defendo a entrada do overflow-x e overflow-y como um atributo válido, já que é bem útil…

E pra galera desatenta aí em cima, alterar as cores da barra de rolagem, é coisa do IE e só funfa nele mesmo…

abços

# 35° Matheus de Oliveira Friday 31 August 2007 às 04:31 AM GMT

Gente, desculpem o erro acima, é no elemento HTML que deve ser colocado, e não no body (se não vão enfrentar problemas com o IE, pra variar)…E sendo assim acho que confirmou a minha dúvida, a barra se encontra no HTML e não no BODY…

Ah, no final ficaria:

html{
overflow:scroll;
}

ou:

html{
overflow-y:scroll;
}

# 36° Osny Santos Netto » Blog Archive » Barra de rolagem vertical fixa no Firefox Tuesday 9 October 2007 às 02:9 AM GMT

[...] Fonte: http://revolucao.etc.br/archives/scrollbar-no-firefox/ [...]

# 37° José Lara Thursday 25 October 2007 às 10:25 PM GMT

Ou, o firefox não é ruim, so precisa que os códigos estejam certos.

Valew pela dica. Abraço

# 38° Pedro Thursday 1 November 2007 às 03:1 PM GMT

Legal, eu preferi usar:
html { overflow: hidden; }

só para parecer menos hack haha
isso desativa completamente o scroll, para páginas flash ou pequenas..

# 39° Pércoles Tiago Napivoski Tuesday 6 November 2007 às 12:6 PM GMT

DE: Pércoles
PARA: Matheus de Oliveira

Cara…. overflow-x e overflow-y é validado sim… Mas como CSS 3

# 40° Cristiano Lagame Tuesday 11 December 2007 às 04:11 AM GMT

Matéria velha, mas a utilidade dela é pra sempre!
Me incomodo com essa barra sumindo, achei uma ótima sacada!
Mas acho melhor usar algumas das alternativas propostas que sejam validadas, pois por mais que eu não consiga validar tudo, pelo menos o que der pra validar já tá bom!

# 41° Matheus de Oliveira Tuesday 12 February 2008 às 11:12 AM GMT

@Pedro,

Seria melhor então usar:

html{overflow:auto}

Pois da forma como fez, a barra não aparece “nunca”, mesmo que precise dela (se o conteúdo sumir). Com o “auto” ela não aparece, ao menos que necessite, e funciona perfeitamente no IE e nos browsers de verdade…flw

# 42° Leyrson Tuesday 29 April 2008 às 11:29 AM GMT

prefiro
overflow-y:scroll -moz-scrollbars-vertical;
caso queira esconder vertical .. de um height e overflow-x:hidden;

aconselho que leiam mais em:
http://www.w3.org/TR/css3-box/#overflow

grande abraço

# 43° ana Tuesday 25 November 2008 às 02:25 AM GMT

Muito bom! Tava aqui há horas tentando descobrir isso.. Eita bug do firefox. Valeu!

Avisos: Os itens com asterisco ( * ) são campos de preenchimento obrigatório.; Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.; Todos devem se identificar através de e-mail válido.; Os e-mails dos usuários não serão divulgados no site.