Scrollbar no Firefox
Por: Henrique C. Pereira
Publicado em Monday 16 October 2006 às 13:17Categoria: HTML/CSS/JScript
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.
Comentários dos leitores
Este artigo possui 47 comentários
Verdade !!! é muito ruim esse lance do scroll, valeu a dica vai ser bem útil pra mim… brigadao
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
muito bom, vlw!
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…
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.
Sei lá… Nunca me incomodei com esse lance da barra de rolagem.
Engraçado, eu acho exatamente o contrário… ficava incomodado com a barra no IE qdo não era necessária…
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.
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!
Se eu entendi direito, concordo com o Alexandre Fugita.
Isso faz tanta diferença assim? o.o
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.
Ótima dica.
Eu também detesto isso. Principalmente em formulários.
Esse cara é bom.
Ó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 ;)
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?
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!
Experto? Expert e esperto? ;)
Pingback: Scrollbar no Firefox « [REF]
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
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.
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.
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. ;-)
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á…
Na verdade não precisa usar o seletor HTML pode ser o body mesmo!
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 */}
Ja pensou o dia que vc ver o seu site no Firefox rodando no Linux, vais ter um ataque de nervos…
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
Solução dos problemas (link)
http://www.hesido.com/web.php?page=customscrollba…
Boa! essa semana mesmo, estava tendo problemas com isto!
mas ao invés de xingar o FF, eu xinguei o IE! heheheh
Gostei, mas vc sabe como faz pra mudar a cor pro firefox ? Por css eu n estou conseguindo.
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
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
Ou, o firefox não é ruim, so precisa que os códigos estejam certos.
Valew pela dica. Abraço
Legal, eu preferi usar:
html { overflow: hidden; }
só para parecer menos hack haha
isso desativa completamente o scroll, para páginas flash ou pequenas..
DE: Pércoles
PARA: Matheus de Oliveira
Cara…. overflow-x e overflow-y é validado sim… Mas como CSS 3
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!
@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
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
Muito bom! Tava aqui há horas tentando descobrir isso.. Eita bug do firefox. Valeu!
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;
}
Só para corrigir:
html{
overflow: scroll;
}
Pingback: Coleção dicas CSS - Blog Área Local
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!