Ir para conteúdo / Skip to content

BARRA DE ROLAGEM COM OVERFLOW

Postado em: 16 de agosto de 2006 por Pedro Rogério

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

Se tiver um tempo, leiam também:

Deixe seu comentário

13 comentários para esse post

  1. Rael B. Riolino disse: 16.08.06 ás 09:19
    #1

    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!

  2. Tiago Celestino disse: 16.08.06 ás 14:03
    #2

    O overflow é umas das coisas que admiro no CSS :)

  3. Thalis Valle disse: 18.08.06 ás 19:41
    #3

    O efeito é parecido com o iframe.

  4. Leonardo disse: 08.09.06 ás 17:33
    #4

    o bom do overflow é q ele me ajuda muito a achar determinados erros quando algum div esta destruindo o layout!

  5. amendoin disse: 10.05.07 ás 11:55
    #5

    kara, legal issu mas não funciona com position: fixed.
    será q fiz algo errado, ow eh o browse q não aceita

  6. Gabriel Ramalho disse: 23.06.07 ás 17:09
    #6

    Ave overflow!

    Ele já salvou minha vida.

    Parabéns pela dica.

  7. Katiana disse: 02.07.07 ás 00:58
    #7

    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!

  8. Geisa Santos disse: 06.07.07 ás 10:58
    #8

    como inserir uma barra de rolagem colorida ou com efeitos num e-mail?

  9. Pedro Rogério disse: 06.07.07 ás 12:41
    #9

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

  10. Danilo disse: 10.02.08 ás 10:40
    #10

    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

  11. gadarf disse: 24.04.08 ás 05:19
    #11

    Por que não existe conteúdo excedente se usar overflow.:hidden.

  12. betaurus disse: 13.06.08 ás 08:16
    #12

    no ie não funciona… da pau.. no limite em baixo.

  13. indio disse: 17.07.08 ás 09:13
    #13

    tenho uma pergunta.
    no validadore de css o overflow nao passa nem a pau
    será que tem outra formatação que substitui o overflow ?

Deixe seu comentário