quinta-feira, 22 de outubro de 2009

Barra de rolagem em posts ou widgets

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 existe
E 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

Pix meutedio arroba mail ponto com

30 comentários:

  1. Helen
    Eu 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

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  2. Muito interessante isso, e é bem simples! Não conhecia...

    ResponderExcluir
  3. @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.

    ResponderExcluir
  4. Não conhecia este código. É bem simples e funcionou na perfeição!

    Muito interessante o post.

    ResponderExcluir
  5. Helen
    Coloquei 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

    ResponderExcluir
  6. Nuno, as cores da barra de rolagem seguem o tema do navegador ou do sistema operacional.

    O 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!

    ResponderExcluir
  7. Helena,
    Agradeç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

    ResponderExcluir
  8. Nuno, existem várias formas de se fazer um slideshow assim. Fica a sugestão de pauta para quando eu voltar a atualizar o blog.

    Até mais!

    ResponderExcluir
  9. otimo blog!!!!
    Segui sua dica e ficou perfeito do jeito que eu queria!!!!Obrigada>>>>vou estar sempre aqui...Bjs

    ResponderExcluir
  10. 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!!
    desde já agradeço pela anteção
    obrigado

    ResponderExcluir
  11. Anônimo,

    A 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!

    ResponderExcluir
  12. E quando some a barra de rolagem do blogger?
    Estou com este problema aqui http://cqcinlove.blogspot.com

    ResponderExcluir
  13. Como colocar essa barra horizontal no orkut?

    ResponderExcluir
  14. Tó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.

    ResponderExcluir
  15. Helen..
    Faç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

    ResponderExcluir
  16. muito obrigado me ajudou muito. é a primeira vez que venho aqui e recebo essa ajuda de muita utilidade!
    voltarei aqui sempre

    ResponderExcluir
  17. Oii. Eu usei para colocar no perfil do orkut, colei e tal, mas quando eu fui salvar nao apareceu a barra de rolagem.
    o que deu de errado?

    ResponderExcluir
  18. 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 ?

    ResponderExcluir
  19. O CODIGO NÃO TÁ MAIS FUNCIONANDO!!!!!!!!!!!

    ResponderExcluir
  20. Anônimo, está funcionando sim.

    Aí dá erro? Chuta que é macumba!

    ResponderExcluir
  21. no meu site no funfa so ta pegando texto area so q ai nu da pra eu bota imagem bua

    ResponderExcluir
  22. colo faze-la ficar na horizontal .....coloquei varios thumbs mas ela insiste em fazer o scroll na vert e eu preciso que seja na horizontal

    ResponderExcluir
    Respostas
    1. Do 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:

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

      Excluir
    2. Se não for uma sequência de imagens, sugiro o uso de overflow-x (horizontal) e overflow-y (vertical):

      div {overflow-y:hidden; overflow-x:auto;}

      Excluir

Todos os comentários são moderados pela autora do blog.