Barra de rolagem com overflow
Postado por: Pedro Rogério emSe você precisa fazer uma barra de rolagem em uma div, existe uma maneira muito simples de se obter esse efeito, usaremos a propriedade overflow do CSS. Reparem no código abaixo:
#scroll {
width:300px;
height:170px;
background-color:#F2F2F2;
overflow:auto;
}
Agora no HTML criaremos uma div chamada scroll onde colocare-mos o nosso conteúdo que queremos que tenha a barra de rolagem:
<div id="scroll">
<p>Aqui vai o conteúdo da div</p>
</div>
O que o overflow:auto faz é o seguinte, reparem que foi definido uma altura pra nossa div de 170px, quando o conteúdo ultrapassar essa altura, ele cria uma barra de rolagem automaticamente, interessante não, então veja um exemplo em funcionamento.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Overflow é ótimo para substituir os iframes!
Outra coisa que é bom para usar o OverFlow:
O IE (pra variar) não reconhece o position:fixed; para deixar elementos fixos na tela….
se vc deixar um objeto com position:absolute dentro de uma div com overflow:auto, este objeto funcionará da mesma maneira que o position:fixed…
é uma gambiarra para poder usar este recurso…. daria até um tutorial hehe fica ai a sugestão ;-)
com certeja ajudaria bastante gente…
valeu!
O overflow é umas das coisas que admiro no CSS :)
O efeito é parecido com o iframe.
o bom do overflow é q ele me ajuda muito a achar determinados erros quando algum div esta destruindo o layout!
kara, legal issu mas não funciona com position: fixed.
será q fiz algo errado, ow eh o browse q não aceita
Ave overflow!
Ele já salvou minha vida.
Parabéns pela dica.
Melhor explicação que eu já vi sobre barra de rolagem!
Veja o seu exemplo em funcionamento em http://wordshow.blig.ig.com.br
Muito obrigada!
como inserir uma barra de rolagem colorida ou com efeitos num e-mail?
@Geisa,
Nunca vi alguém fazer isso, não sei nem se é possível. Dá uma procurada no Google pra ver se você encontra alguma coisa!!!
Eu curto bastante o overflow, porém to tendo problemas com o IE 7. O danado as vezes não exibe a barra de rolagem! Alguem sabe pq?
Abraços
Por que não existe conteúdo excedente se usar overflow.:hidden.
no ie não funciona… da pau.. no limite em baixo.
tenho uma pergunta.
no validadore de css o overflow nao passa nem a pau
será que tem outra formatação que substitui o overflow ?
Overflow é uma maravilha.
Uma Duvida.
Alguem sabe alguma forma de : Ao digitar o conteudo dentro de uma tabela. (chat, por exemplo) o conteudo recente aparecer visivel na linha, ao invez da barra de rolagem, diminuir?
Uma especie de autorefresh de conteudo, se é que se possa chamar assim.
No aguardo
isso acaba de salvar minha vida rsrsrsrs
muito boa, simples e funcional.
Parabéns pela grande dica!
muito bom mesmo essas dicas ai vlw pessoal
+1 q teve a vida salva. :)
obrigado!