Atualizado dia 18 de março de 2018.
Não é algo que deva ser usado sem moderação, mas caixas com barras de rolagem podem ser úteis em algumas situações, como quando você tem que disponibilizar um código muito grande ou quando existe a possibilidade do conteúdo ser expandido dinamicamente e assim deformar o leiaute, só para citar dois exemplos.
O valor auto é o que faz a barra aparecer somente quando o conteúdo da caixa extrapola o tamanho determinada na tag <div>.
- height - altura em pixels
- width - largura em pixels
- overflow - valor da barra de rolagem
- overflow-x - valor da barra de rolagem horizontal
- overflow-y - valor da barra de rolagem vertical
- margin-left e margin-right - configuro como auto para a caixa ficar centralizada
Seguem três aplicações desse mesmo código, só muda o conteúdo da caixa e é ele que define se cada barra de rolagem, vertical e horizontal, deve ou não aparecer.
<div style='overflow:auto; width:300px; height:300px; margin-left:auto; margin-right:auto;'>Conteúdo aqui.</div>
Exemplo 1 → barra vertical:
Motivo
Eu canto porque o instante existeE a minha vida está completa.
Não sou alegre nem sou triste:
Sou poeta.
Irmã das coisas fugidias,
Não sinto gozo nem tormento.
Atravesso noites e dias
No vento
Se desmorono ou se edifico,
Se permaneço, ou me desfaço,
- não sei, não sei. Não sei se fico
ou passo.
Sei que canto. E a canção é tudo.
Tem sangue eterno a asa ritmada.
E um dia sei que estarei muda:
- mais nada.
Cecília Meireles
Exemplo 2 → barra horizontal:
Exemplo 3 → duas barras:
Outros valores para overflow:
- inherit → herdar do elemento superior na folha de estilos
- visible (padrão) → mostra todo o conteúdo da caixa, nem que para isso tenha que desrespeitar o tamanho da caixa e atropelar outros elementos da página.
- hidden → sem barra de rolagem
- scroll → com barra de rolagem. Não dá um visual legal, porque o background da barra aparece mesmo se ela for desnecessária.
- auto → o modo inteligente: a barra aparece somente se for necessária.
Até mais!
Fontes: As Menininhas e HTML Dog
Helen
ResponderExcluirEu testei mas não entendi como funciona!
Coloquei o código no HTML de postagem, no Live Writer, inserí um texto ENORME e não apareceu nada!
Mas, em um gadget HTML/Java Script na sidebar sim.
Para postagens, ele não funciona?
Bjs
Funciona sim, mas você tem que testar no próprio Blogger. A exibição do Live Writer não é fiel quando você usa <div> dentro do post.
ExcluirMuito interessante isso, e é bem simples! Não conhecia...
ResponderExcluir@Vera, funciona sim. O problema do Windows Live Writer é que quando a gente coloca no modo visual o danado muda nosso código, recomendo que faça o teste sem usar o modo visual do WLW ou no próprio editor do Blogger, como eu fiz ao digitar este post.
ResponderExcluirNão conhecia este código. É bem simples e funcionou na perfeição!
ResponderExcluirMuito interessante o post.
Helen
ResponderExcluirColoquei o código na minha página e funciona às mil maravilhas.
Só uma questão: não dá para alterar a cor da barra (por exempo de azul para cinzento)?
Obrigado,
Nuno
Nuno, as cores da barra de rolagem seguem o tema do navegador ou do sistema operacional.
ResponderExcluirO Blogger não permite mudar as cores da barra de rolagem, em nenhum navegador
Caso não use Blogger, você pode definir as cores que aparecerão nos navegadores Internet Explorer e Opera. Saiba mais no post Barra de rolagem colorida.
Os outros navegadores não têm esse recurso.
Volte sempre!
Helena,
ResponderExcluirAgradeço o esclarecimento.
Aroveitando a oportunidade gostaria de lhe colocar outra questão.
Será que a Helena conhece algum slideshow de fotos em html do género que seleccionando uma das fotos apresentadas na página abra o slideshow mostrando as restantes fotos?
Obrigado,
Nuno
Nuno, quem é Helena?
ResponderExcluirNuno, existem várias formas de se fazer um slideshow assim. Fica a sugestão de pauta para quando eu voltar a atualizar o blog.
ResponderExcluirAté mais!
otimo blog!!!!
ResponderExcluirSegui sua dica e ficou perfeito do jeito que eu queria!!!!Obrigada>>>>vou estar sempre aqui...Bjs
Ola meu Nome é Fernando!!! eu eu fiz um site e personalizei a barra de rolagem de dentro do site, quando o conteudo ultrapassa o tamanho da div ela aparece, mas só funciona no internet explorer, em outros navegadores ela não funciona, aparece a barra de rolagem normal. Como eu faço para aparecer em vários navegadores?? outra dúvida é se eu posso não apenas mudar as cores da barra de rolagem, mas também o modelo dela!!
ResponderExcluirdesde já agradeço pela anteção
obrigado
Anônimo,
ResponderExcluirA barra de rolagem colorida só funciona no Opera e no Internet Explorer, nada mais, nada menos.
Com flash ou ainda com CSS e JavaScript é possível simular uma barra de rolagem colorida em qualquer navegador, mas é um script que eu ainda não aprendi, então não posso ensinar.
Até mais!
E quando some a barra de rolagem do blogger?
ResponderExcluirEstou com este problema aqui http://cqcinlove.blogspot.com
Como colocar essa barra horizontal no orkut?
ResponderExcluirTópico de muita utilidade. Esta dica ajudará muito nas edições de meu template. Assinem gratuitamente o Feed deste blog, vale muito a pena. Se não sabem o que é feed, procurem saber.
ResponderExcluirHelen..
ResponderExcluirFaço tudo certinho e quando boto para testar, aparece a barra de rolagen, certinha.. Mas quanto posto o texto ela simplismente não aparece.
O que pode estar acontecendo? bjs
Oii. Eu usei para colocar no perfil do orkut, colei e tal, mas quando eu fui salvar nao apareceu a barra de rolagem.
ResponderExcluiro que deu de errado?
Olá Helen, me chamo Rafael e coloquei a barrinha no meu perfil do orkut, sendo que, abaixo dessa barra estou tentando pôr uma foto minha, mas em todas minhas tentativas não realizei o que eu desejava, pois fica um grande espaço entre o quadrado da barra e minha imagem. O que faço parar diminuir esse espaço ?
ResponderExcluirO CODIGO NÃO TÁ MAIS FUNCIONANDO!!!!!!!!!!!
ResponderExcluirAnônimo, está funcionando sim.
ResponderExcluirAí dá erro? Chuta que é macumba!
POSTEI E FICOU BEM LEGAL MUITO BOM
ResponderExcluirno meu site no funfa so ta pegando texto area so q ai nu da pra eu bota imagem bua
ResponderExcluirBuá!
Excluircolo faze-la ficar na horizontal .....coloquei varios thumbs mas ela insiste em fazer o scroll na vert e eu preciso que seja na horizontal
ResponderExcluirDo que se trata? É uma sequência de imagens? Se for, sugiro que defina uma div dentro da outra, sendo que a que está do lado de fora vai ter o overflow e a de dentro vai definir um width bem largo (para caber todas as imagens uma do lado da outra). Mais ou menos assim:
Excluir<div style='overflow:auto; width:200px; height:200px; margin-left:auto; margin-right:auto;'>
<div style='width:500px; height:200px;'>
<img src='imagem1.jpg'/> <img src='imagem2.jpg'/> <img src='imagem3.jpg'/> <img src='imagem4.jpg'/>
</div>
</div>
Se não for uma sequência de imagens, sugiro o uso de overflow-x (horizontal) e overflow-y (vertical):
Excluirdiv {overflow-y:hidden; overflow-x:auto;}
blz ótimo code
ResponderExcluirvlw, 100% funcional...
ResponderExcluir