Scrollbar no Firefox

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.

  • Chan

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

  • http://box711.bluehost.com/suspended.page/disabled.cgi/atreyo.com Thiago Machado

    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

  • Ariel

    muito bom, vlw!

  • http://www.milfont.org/blog/ Christiano Milfont

    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…

  • http://alenonimo.com.br/ Alenônimo

    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.

  • http://project47.viscountbox.com Carlos Eduardo

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

  • http://techbits.com.br/ Alexandre Fugita

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

  • Rafael Dourado

    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.

  • http://www.bravus.net Rodrigo

    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!

  • http://arcanjo.org/ Rafael Arcanjo

    Se eu entendi direito, concordo com o Alexandre Fugita.

  • Shino

    Isso faz tanta diferença assim? o.o

  • Zephon

    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 programasMozilla Firefox
    eshtml.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.

  • http://jaderubini.wordpress.com/ Jader Rubini

    Ótima dica.

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

  • http://www.crisdias.com/ Cristiano Dias

    Esse cara é bom.

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Ó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 ;)

  • http://reginaldosousa.com.br/ Regionaldo Sousa

    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?

  • http://www.ivogomes.com Ivo Gomes

    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!

  • JOrge Wagner

    Experto? Expert e esperto? ;)

  • Pingback: Scrollbar no Firefox « [REF]()

  • http://www.a2media.com.br Ricardo Seiji

    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.

  • Pingback: Links comentados via del.icio.us - 3 » Japs()

  • Samuel Guilherme

    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.

  • http://www.andersonsa.com/ Anderson Sá

    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.

  • Manoel Netto

    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. ;-)

  • Luis Vulcanis

    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á…

  • Anderson Cust&oacute

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

  • http://genima.utopia.com.br/tiki-index.php Genima Pina

    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 */}

  • Mau

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

  • http://www.fallover.com.br Vinícius Cama

    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!

  • Pingback: Blog HotSync » Coleção dicas CSS()

  • http://www.hesido.com/web.php?page=customscrollbar Ricardo

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

  • Everton Fraga

    Boa! essa semana mesmo, estava tendo problemas com isto!

    mas ao invés de xingar o FF, eu xinguei o IE! heheheh

  • Leandro

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

  • Matheus de Oliveira

    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

  • Matheus de Oliveira

    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;

    }

  • Pingback: Osny Santos Netto » Blog Archive » Barra de rolagem vertical fixa no Firefox()

  • http://sambasafari.wordpress.com/ José Lara

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

    Valew pela dica. Abraço

  • http://blog.tecnalta.net/ Pedro

    Legal, eu preferi usar:

    html { overflow: hidden; }

    só para parecer menos hack haha

    isso desativa completamente o scroll, para páginas flash ou pequenas..

  • Pércoles Tiag

    DE: Pércoles

    PARA: Matheus de Oliveira

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

  • Cristiano Lagame

    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!

  • Matheus de Oliveira

    @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

  • Leyrson

    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

  • ana

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

  • Gabriel Ferrari

    Se quiserem fazer de uma forma válida pelos padrões W3C e funcione nos demais navegadores além do FireFox basta fazer isso:

    body{

    overflow: scroll;

    }

  • Gabriel Ferrari

    Só para corrigir:

    html{

    overflow: scroll;

    }

  • Pingback: Coleção dicas CSS - Blog Área Local()

  • http://www.destaqueweb.com.br Leandro

    Pessoal, muitos aqui não se preocupam com validação w3c, então pq se preocupar com o padrão que o navegador usa ou deixa de usar? Não acham contraditório? Que padrão acham que o Firefox usa? Ele usa o padrão que vc ignora em validar no w3c. Vamos ter um pouco de coerência galera!